Przepełnienie

W CSS właściwość overflow określa, co dzieje się z zawartością, która wykracza poza obszar elementu. Gdy zawartość elementu jest zbyt duża, by zmieścić się w określonej szerokości i wysokości, właściwość overflow decyduje, czy przyciąć zawartość, dodać paski przewijania, czy wyświetlić zawartość poza granicami elementu. 

Oto podstawowa składnia użycia właściwości overflow:

selector {
    overflow: value;
}

value: Żądane zachowanie w przypadku przepełnienia, które może być jednym z następujących:

• visible: To wartość domyślna. Treść, która się nie mieści, jest wyświetlana poza obszarem elementu i może nakładać się na sąsiednie elementy.

• hidden: Nadmiarowa zawartość jest przycinana, a jej pozostała część jest niewidoczna.

• scroll: Dodaje paski przewijania (poziomy i pionowy) do elementu, umożliwiając użytkownikom przewijanie przepełnionej zawartości.

• auto: Przeglądarka określa, czy dodać paski przewijania, na podstawie zawartości i dostępnego miejsca. Zazwyczaj paski przewijania są dodawane tylko wtedy, gdy jest to konieczne.

Na przykład:

div {
    width: 200px;
    height: 100px;
    overflow: scroll;
}

W tym przykładzie wszystkie elementy <div> o szerokości 200px i wysokości 100px będą miały dodane paski przewijania, aby można było zobaczyć każdą przepełniającą zawartość. 

Możesz także niezależnie kontrolować zachowanie przepełnienia w kierunku poziomym i pionowym za pomocą właściwości overflow-x i overflow-y:

.example {
    overflow-x: hidden; /* Ukryj poziome przepełnienie */
    overflow-y: scroll; /* Dodaj pionowy pasek przewijania */
}