overflow özelliği ve scroll containers nasıl çalışır?

Question

Accepted Answer

`overflow`, içeriğin kutusu için **çok büyük** olması durumunda ne olacağını denetler — kırpılıp kırpılmayacağı, kaymayacağı veya dışarıya taşacağı.

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

## Ayrı eksenler

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

Yaygın bir desen: yatay taşmayı engelleme, dikey kaymaya izin verme.

## Bir scroll container oluşturma

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

Anahtarı: bir scroll container **kısıtlanmış bir boyuta** (`height`/`max-height`) *artı* `overflow: auto` gereksinim duyar. Boyut sınırlaması olmadan kutu büyür ve asla kaymaz.

## İnce ama önemli bir yan etki: overflow bir block formatting context oluşturur

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

`overflow` öğesini `visible` dışında bir şeye ayarlamak yeni bir **block formatting context** oluşturur, bu da yüzen alt öğeleri içerir ve margin çökmesini engeller — tarihsel olarak "clearfix" olarak kullanılmıştır.

## Modern scroll özellikleri

```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` JS olmadan karuseleller oluşturur; `overscroll-behavior` kaydırılan paneli arkasındaki sayfayı da kaydırmaktan durdurur (modallar/sohbet pencereleri için harika).

## Neden önemli

`overflow` kaydırma alanlarını, metin kırpmasını (`text-overflow: ellipsis` ile) ve modal/panel kaydırma davranışını yönetir.

Scroll container'ların bir boyut kısıtlamasına ihtiyaç duyduğunu, `overflow` bir biçimlendirme bağlamı oluşturduğunu ve modern yardımcıların (`scroll-snap`, `overscroll-behavior`) overflow etrafındaki pratik düzen ve UX ihtiyaçlarını kapsadığını bilmek.