CSS'de overflow özelliği ne yapar ve hangi durumlarda kullanılmalıdır?

CSS'de overflow özelliği, bir öğenin sınırlarından taşan içeriğin nasıl işleneceğini belirler.

• visible: İçerik tamamen gösterilir, konteyner sınırlarını aşsa bile.
• hidden: Konteyner sınırlarını aşan içerik kesilir ve görünmez olur.
• scroll: Her zaman kaydırma çubukları (hem yatay hem dikey) gösterilir, içerik taşmasa bile.
• auto: İçerik taşarsa kaydırma çubukları yalnızca o zaman görünür.

Kullanım durumları:

• Bir öğenin içeriği (örneğin, metin veya resim) belirlenen boyutlardan büyük olabileceği ve görüntülemenin yönetilmesi gerektiğinde.
• Sayfa içinde kaydırılabilir alanlar oluşturmak için, örneğin listeler, kod blokları veya tablolar için.
• İstenmeyen, taşan içeriği kesmek ve orijinal düzeni korumak için.

overflow: auto; kullanımı için örnek, sınırlı yüksekliğe sahip bir blok:

.scrollable-block {
  height: 200px; /* Blok yüksekliğini sınırla */
  overflow: auto; /* İçerik büyükse kaydırma çubukları ekle */
  border: 1px solid #ccc; /* Görünürlüğü artırmak için çerçeve ekle */
  padding: 10px; /* İç boşluk */
}