Przepełnienie

Overflow w CSS to właściwość, która określa, jak element powinien radzić sobie z zawartością, która przekracza jego granice. Właściwość ta może mieć następujące wartości:

visible zawartość jest widoczna poza granicami elementu

										
.div {
  overflow: visible;
  padding: 4px;
  background-color: #80422a;
  border: 2px solid black;
  height: 100px;
}

Visible (domyślna wartość): Zawartość jest widoczna poza granicami elementu. Oznacza to, że nie jest ona automatycznie ukrywana ani nie jest w żaden sposób ograniczona.

scroll zawartość jest widoczna, a użytkownik może przewijać, aby ją zobaczyć

										
.div {
  overflow: scroll;
}

Scroll: Zawartość jest widoczna, a użytkownik może przewijać, aby ją zobaczyć. W tym przypadku element jest ograniczony do swoich granic i zawartość jest przewijana, jeśli jest za duża. Scroll: Zawartość jest widoczna, a użytkownik może przewijać, aby ją zobaczyć. W tym przypadku element jest ograniczony do swoich granic i zawartość jest przewijana, jeśli jest za duża. Scroll: Zawartość jest widoczna, a użytkownik może przewijać, aby ją zobaczyć. W tym przypadku element jest ograniczony do swoich granic i zawartość jest przewijana, jeśli jest za duża. Scroll: Zawartość jest widoczna, a użytkownik może przewijać, aby ją zobaczyć. W tym przypadku element jest ograniczony do swoich granic i zawartość jest przewijana, jeśli jest za duża. Scroll: Zawartość jest widoczna, a użytkownik może przewijać, aby ją zobaczyć. W tym przypadku element jest ograniczony do swoich granic i zawartość jest przewijana, jeśli jest za duża. Scroll: Zawartość jest widoczna, a użytkownik może przewijać, aby ją zobaczyć. W tym przypadku element jest ograniczony do swoich granic i zawartość jest przewijana, jeśli jest za duża.

auto zawartość jest widoczna i automatycznie przewijana, jeśli jest za duża dla elementu

										
.div {
  overflow: auto;
}

Auto: Zawartość jest widoczna i automatycznie przewijana, jeśli jest za duża dla elementu. W tym przypadku element jest ograniczony do swoich granic i zawartość jest automatycznie przewijana, jeśli jest za duża. Auto: Zawartość jest widoczna i automatycznie przewijana, jeśli jest za duża dla elementu. W tym przypadku element jest ograniczony do swoich granic i zawartość jest automatycznie przewijana, jeśli jest za duża.

hidden zawartość jest ukryta i niedostępna

										
.div {
  overflow: hidden;
}

								
.element {
  overflow-x: scroll;
  overflow-y: visible;
}

Important

Te właściwości są przydatne, gdy chcemy kontrolować wyświetlanie zawartości wewnątrz kontenera, zwłaszcza gdy elementy wychodzą poza granice kontenera i nie mieszczą się na stronie.