Hogyan működik az overflow tulajdonság és a scroll konténerek?

Question

Accepted Answer

`overflow` szabályozza, hogy mi történik, amikor a tartalom **túl nagy** a dobozához — legyen szó kivágásról, görgetésről vagy kifolyásról.

```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) */
```

## Külön tengelyek

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

Egy közös minta: a vízszintes overflow megakadályozása, miközben a függőleges görgetést engedélyezzük.

## Scroll konténer létrehozása

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

A kulcs: a scroll konténernek egy **korlátozott mérete** (`height`/`max-height`) *valamint* `overflow: auto` szükséges. Méretkorlát nélkül a doboz csak növekszik és soha nem görgethető.

## Egy finom, de fontos mellékhatás: az overflow block formatting contextot hoz létre

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

Az `overflow` bármire állítása, csak nem `visible`, új **block formatting contextet** hozz létre, amely tartalmazza a lebegő gyermekeket és megakadályozza a margó összecsukódását — történelmileg "clearfix" megoldásként használták.

## Modern scroll funkciók

```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; }
```

A `scroll-snap` karusszeleket készít JS nélkül; az `overscroll-behavior` megakadályozza, hogy egy görgethető panel a mögötte lévő oldalt is görgetse (nagyszerű a modal/chat ablakoknál).

## Miért fontos

Az `overflow` szabályozza a görgetési területeket, a szöveg vágását (`text-overflow: ellipsis` segítségével), és a modal/panel görgetési viselkedését.

Annak ismerete, hogy a scroll konténereknek méretkorlát kell, hogy az `overflow` formatting contextet hoz létre, és a modern segítők (`scroll-snap`, `overscroll-behavior`) lefedik az overflow körüli gyakorlati elrendezés és UX szükségleteket.