Overflow

Ketika isi sebuah kotak lebih besar dari kotaknya sendiri — teks yang terlalu panjang, gambar berukuran tetap, atau daftar yang melebihi tinggi panel — browser harus memutuskan nasib kelebihan itu. Properti overflow mengatur keputusan tersebut: apakah isi meluber dan tetap terlihat, dipotong, atau dipotong dengan fasilitas gulir. Nilai bawaannya visible, sehingga tanpa deklarasi apa pun kelebihan konten tetap tampak di luar kotak. Chapter ini membahas lima nilai overflow, pengaturan per sumbu, serta hubungannya dengan bilah gulir dan block formatting context.

Lima Nilai overflow #

Nilai clip mirip hidden, tetapi lebih tegas: seluruh bentuk gulir dilarang, termasuk pengguliran programatik lewat JavaScript seperti scrollTop. Nilai ini cocok untuk pemotongan murni — misalnya memotong kartu berbentuk tertentu — tanpa memberi harapan palsu bahwa konten masih bisa dijangkau. Fitur ini termasuk Baseline dan dapat dipakai di seluruh browser modern.

Pemotongan terjadi pada tepi padding box, bukan tepi konten: area padding tetap menjadi bagian kotak yang terlihat, dan bilah gulir — bila muncul — menempati area itu juga. Properti overflow dapat ditulis dengan dua nilai sekaligus untuk mengatur kedua sumbu, misalnya overflow: hidden auto; nilai pertama mengatur sumbu horizontal dan nilai kedua sumbu vertikal. Bila hanya satu nilai yang ditulis, kedua sumbu memakai nilai yang sama.

Mengatur per Sumbu dengan overflow-x dan overflow-y #

Properti overflow-x dan overflow-y mengatur dua sumbu secara terpisah — pola yang lazim untuk carousel horizontal yang tidak boleh menggulir vertikal. Ada satu aturan yang sering mengejutkan: browser tidak mengizinkan satu sumbu visible sementara sumbu lainnya dipotong. Bila kita menulis overflow-x: hidden dengan overflow-y: visible, nilai visible dihitung ulang menjadi auto.

.carousel {
  overflow-x: hidden;
  overflow-y: visible; /* dihitung browser menjadi auto */
}

Hasil di Browser:

Enam kotak berukuran sama memuat teks yang lebih panjang daripada
kotaknya: visible meluber keluar tepi; hidden terpotong tanpa bilah
gulir; scroll menampilkan bilah gulir secara tetap; auto menampilkan
bilah gulir hanya bila diperlukan; clip terpotong penuh. Kotak dengan
overflow-x: hidden terbaca computed overflow-x: hidden dan computed
overflow-y: auto — nilai visible pada sumbu lain otomatis berubah.

Bilah Gulir, scrollbar-gutter, dan BFC #

Bilah gulir klasik menempati ruang di dalam kotak. Ketika bilah muncul mendadak, lebar konten menyusut dan layout bergeser. Properti scrollbar-gutter dengan nilai stable mencadangkan ruang untuk bilah gulir sejak awal, sehingga layout tetap diam ketika bilah muncul atau hilang. Fitur ini termasuk Baseline dan aman dipakai pada container yang tingginya berubah-ubah.

Deklarasi overflow selain visible memiliki efek samping yang penting: kotak tersebut membentuk block formatting context (BFC) baru. Dalam BFC baru, margin anak tidak lagi merambat keluar induknya, dan float di dalamnya ikut terhitung pada tinggi induk. Efek inilah yang membuat overflow: hidden sering dipakai untuk menghentikan margin collapse — perilaku yang kita bahas pada Chapter Margin Collapse . Untuk niat semacam itu, display: flow-root lebih ekspresif karena tidak memotong apa pun.

Satu hal terakhir menyangkut aksesibilitas. Konten di dalam scroll container tetap dapat dijangkau pengguna keyboard sepanjang kotaknya menerima fokus. Bila kotak tidak memuat elemen yang dapat difokuskan — misalnya hanya berisi teks — tambahkan tabindex="0" agar pengguna keyboard dapat menggulirnya.