Kaip veikia overflow savybė ir slinkimo konteineriai?

Question

Accepted Answer

`overflow` kontroliuoja, kas nutinka, kai turinys yra **per didelis** savo langeliui — ar jis būna apkirptas, slinkinėja, ar išsilieja lauk.

```css
.box { overflow: visible; }  /* default — content spills OUT of the box */
.box { overflow: hidden; }   /* clipped — overflowing content is cut off */
.box { overflow: scroll; }   /* always shows scrollbars (even if not needed) */
.box { overflow: auto; }     /* scrollbars appear ONLY when needed (best) */
```

## Atskirtos ašys

```css
.box {
  overflow-x: hidden;  /* clip horizontal */
  overflow-y: auto;    /* scroll vertical when needed */
}
```

Bendra praktika: užkirsti horizontalų perpilimą, leidžiant vertikalų slinkimą.

## Slinkimo konteinerio kūrimas

```css
.scroll-area {
  max-height: 400px;   /* constrain the height */
  overflow-y: auto;    /* content beyond 400px scrolls */
}
```

Svarbu: slinkimo konteineriui reikalinga **suvaržyta dydžio** (`height`/`max-height`) *ir* `overflow: auto`. Be dydžio apribojimo, langelis tiesiog augdamas niekada neslinkina.

## Subtilus, bet svarbus šalutinis efektas: overflow sukuria blokinio formatavimo kontekstą

```css
.clearfix { overflow: hidden; } /* contains floats / stops margin collapse */
```

Nustatę `overflow` į bet ką, išskyrus `visible`, nustatysite naują **blokinio formatavimo kontekstą**, kuris sudraudžia plaukiojančius vaikus ir nustabdo paragrafo tarpų suglaudimą — istoriškai naudojant kaip "clearfix".

## Šiuolaikinės slinkimo funkcijos

```css
.gallery {
  overflow-x: auto;
  scroll-snap-type: x mandatory; /* snap to items while scrolling */
  overscroll-behavior: contain;   /* stop scroll "chaining" to the page */
}
.gallery > * { scroll-snap-align: start; }
```

`scroll-snap` sukuria karuselius be JS; `overscroll-behavior` sustabdo slinkinę sritį nuo to, kad ji taip pat slintų svetainės dalį už jos (puiku modalams/pokalbių langams).

## Kodėl tai svarbu

`overflow` valdo slinkimo sritis, teksto apkirpimą (naudojant `text-overflow: ellipsis`) ir modalų/panelių slinkimo elgesį.

Žinojimas, kad slinkimo konteineriai reikalingi dydžio apribojimui, kad `overflow` sukuria formatavimo kontekstą, ir šiuolaikinės pagalbinės priemonės (`scroll-snap`, `overscroll-behavior`) apima praktines maketavimo ir UX poreikius aplink perpilimą.