Merhaba,
Öğelerin ölçü değerleri (genişlik ve yükseklik) içeriğin sayfa içerisinde yerleşimlerini yapan dinamik bir özelliktir.

.blok{ width: 600px; }

Örnekteki gibi genişlik (width) değeri tanımlayarak .blok classını kullanan öğemizin 600px bir genişlik kaplamasını istedik.

Eğer tarayıcı ekranı 600px değerinden daha küçükse yatay bir kaydırma çubuğu ortaya çıkar. Eğer 600px değerinden daha büyük bir ekrana sahipsek, öğemiz tüm ekranı yatayda kaplamaz, 600px sınırında biter.

Burada sadece genişlik değerini (width) belirledik. Öğemizin içeriği devam ettiği sürece yükseklik değeri dinamik olarak artmaya devam edecektir. Eğer yükseklik değerini (height) belirlersek, onu da sabitlemiş oluruz. Şimdi bir örnek yapalım:

HTML Kodumuz:

<blockquote>Tercihleriniz umutlarınızı yansıtsın, korkularınızı değil.</blockquote>

CSS Kodumuz:

blockquote{ background: yellow; height: 50px; width: 100px; }

Sonuç:

CSS overflow

Yukarıdaki örneğimizde yazdığımız yazı blockquote öğesine verdiğimiz ölçüleri aşmış, dolayısı ile yazının tamamı verdiğimiz sarı renkli arkaplana sığmamış. overflow özelliği de bu tarz taşma durumlarını yönetmemizi sağlar.

Varsayılan olarak örnekteki gibi visible değerini taşır, yani içerik ekrana yazılmaya devam eder. Eğer biz içeriğimizin sadece kapsayan bloğa verdiğimiz genişlik ve yükseklik değerlerinde görünmesini istiyorsak overflow:hidden; özelliğini kullanabiliriz.

Görüldüğü üzere yalnızca <blockquote> için belirlediğimiz genişlik ve yükseklik değerlerinde içeriğimiz görünüyor. Geriye kalan kısım gizlenmiş durumda. Eğer içeriğimizi yine de erişilebilir yapmak istiyorsak, yazı alanımıza bir scroll koymamız da mümkün. Bunun için: overflow:scroll; özelliğini kullanabiliriz.

Bu işlemi otomatik olarak yapması için overflow:auto; şeklinde de kullanabiliriz. Böylece içerik, içinde bulunduğu alanın boyutlarını aşarsa otomatik olarak scroll özelliği kazanır.