Co robi właściwość overflow w CSS i w jakich przypadkach należy jej używać?

Właściwość overflow w CSS określa, jak obsługiwać zawartość wykraczającą poza granice elementu.

• visible: Zawartość jest wyświetlana w całości, nawet jeśli wykracza poza kontener.
• hidden: Nadmiarowa zawartość jest przycinana i niewidoczna.
• scroll: Zawsze wyświetlane są paski przewijania (poziomy i pionowy), nawet jeśli zawartość nie wykracza.
• auto: Paski przewijania pojawiają się tylko wtedy, gdy jest to konieczne (gdy zawartość wykracza).

Należy używać:

• Gdy zawartość elementu (np. tekst lub obraz) może być większa niż ustawione rozmiary i konieczne jest zarządzanie jej wyświetlaniem.
• Do tworzenia przewijalnych obszarów na stronie, np. dla list, bloków kodu lub tabel.
• Do przycinania niepożądanej zawartości wykraczającej poza element, aby zachować oryginalny układ.

Przykład użycia overflow: auto; dla bloku o ograniczonej wysokości:

.scrollable-block {
  height: 200px; /* Ograniczamy wysokość bloku */
  overflow: auto; /* Dodajemy paski przewijania, jeśli zawartość jest większa */
  border: 1px solid #ccc; /* Dodajemy obramowanie dla widoczności */
  padding: 10px; /* Wewnętrzne odstępy */
}