Tinggi tetap dan konten yang panjang pernah kita singgung pada chapter Min-Height dan Max-Height: ketika isi melebihi tempatnya, browser harus memutuskan arah. Property overflow adalah pengendali keputusan itu — membiarkan konten meluber, memotongnya, atau menyediakan gulir. Property ini juga muncul di tempat yang tidak terduga: ia membentuk block formatting context, sehingga berhubungan langsung dengan margin collapse pada chapter Margin Collapse. Kita pelajari keempat nilai utamanya dulu, lalu nilai modern clip dan aturan pasangan overflow-x/overflow-y.
Empat Nilai Utama #
| Nilai | Perilaku |
|---|---|
visible (default) | Konten meluber keluar kotak, tanpa scrollbar |
hidden | Konten dipotong pada tepi kotak; tidak bisa digulir sama sekali |
scroll | Scrollbar selalu tampil di kedua sumbu, bahkan saat konten muat |
auto | Scrollbar muncul hanya saat konten benar-benar meluap |
.kotak-catatan {
height: 140px;
overflow: auto; /* scrollbar hanya bila dibutuhkan */
}Demo berikut memberi tiga kotak teks yang sama panjangnya dan tinggi tetap — hanya overflow-nya yang berbeda:
Untuk kebanyakan kasus, auto adalah pilihan yang paling aman — pemotongan tanpa akses (hidden) atau scrollbar permanen (scroll) jarang diinginkan.
Pasangan overflow-x dan overflow-y #
overflow adalah shorthand untuk overflow-x dan overflow-y, sehingga kedua sumbu bisa diatur berbeda — pola lazim untuk galeri yang menggulir ke samping:
.galeri-mendatar {
overflow-x: auto;
overflow-y: hidden;
}Ada aturan browser yang perlu dihafal: bila satu sumbu visible dan sumbu lainnya non-visible, nilai visible dihitung sebagai auto. Scroll container harus konsisten pada kedua sumbu, sehingga kombinasi overflow-x: visible + overflow-y: hidden tidak mungkin terjadi — sumbu-x otomatis berubah menjadi auto dan scrollbar horizontal bisa muncul tanpa diminta.
overflow: clip — Memotong Tanpa Scroll Container #
Nilai modern overflow: clip memotong konten seperti hidden, tetapi elemennya tidak menjadi scroll container: kontennya tidak bisa digulir sama sekali, bahkan lewat JavaScript. Untuk pemotongan murni — misalnya strip menu yang sengaja dipangkas — clip lebih murah dan lebih tegas:
.strip-menu {
height: 48px;
overflow: clip; /* potong saja; tanpa scrollbar, tanpa gulir programatik */
}Property ini didukung seluruh browser modern. Perbedaannya dengan hidden terasa saat interaksi: konten hidden masih bisa digulir lewat keyboard atau script, sedangkan clip benar-benar tertutup.
Kaitan ke BFC dan Margin Collapse #
Nilai overflow selain visible — hidden, scroll, dan auto — menjadikan elemen pembentuk block formatting context (BFC). Konsekuensinya dua arah: margin anak tidak lagi lolos dari induknya, dan float di dalamnya ikut tertampung. Inilah alasan trik lama overflow: hidden sering dipakai menahan margin:
.panel-berita {
overflow: auto; /* membentuk BFC: margin anak tertahan, float tertampung */
}Bila tujuannya hanya menahan margin tanpa efek pemotongan apa pun, display: flow-root dari chapter Margin Collapse tetap pilihan yang lebih bersih — overflow sebaiknya dipilih sesuai kebutuhan visualnya sendiri.
Kesalahan Umum #
| Gejala | Penyebab | Perbaikan |
|---|---|---|
| Scrollbar horizontal muncul tanpa diminta | overflow-x: visible dipasangkan dengan overflow-y non-visible; visible berubah menjadi auto | Atur kedua sumbu secara sadar, misalnya overflow-x: auto; overflow-y: hidden |
| Dropdown atau tooltip terpotong | Induk ber-overflow: hidden atau clip memotong anak yang keluar | Pindahkan pemotongan ke elemen yang tepat, atau keluarkan komponen dari wadah pemotong |
Konten tidak bisa dijangkau setelah overflow: hidden | Pemotongan tanpa jalur gulir | Ganti auto agar konten tetap tergulir, atau pastikan konten tersedia di tempat lain |
| Scrollbar terus tampil meski konten muat | overflow: scroll selalu menyediakan scrollbar | Gunakan auto agar scrollbar hanya muncul saat dibutuhkan |
Ringkasan #
overflow menentukan nasib konten yang meluap: visible meluber, hidden memotong tanpa gulir, scroll menyediakan scrollbar permanen, auto menyediakannya saat dibutuhkan, dan clip memotong tanpa membentuk scroll container. Pasangan overflow-x/overflow-y tidak boleh mencampur visible dengan nilai lain, dan nilai non-visible menjadikan elemen pembentuk BFC — pintu masuk lain untuk memahami margin collapse. Karena hampir semua gejala layout berujung pada kotak, chapter penutup section ini membahas cara mendiagnosisnya lewat DevTools.