Setiap kotak di CSS punya ukuran, dan kadang isi di dalamnya terlalu besar untuk muat. Paragraf panjang di kotak pendek. Tabel lebar di kolom sempit. Daftar berisi lima puluh item di kartu yang sebenarnya cuma cukup untuk lima. Lalu, bagian yang tidak muat itu jadinya bagaimana?
Nah, pertanyaan itulah yang dijawab oleh property overflow. Secara bawaan, konten yang kebesaran akan begitu saja meluber keluar dari tepi kotaknya — dan ini biasanya bukan yang kamu mau. Lewat overflow, kamu bisa ambil kendali: potong kelebihannya, tambahkan scrollbar, atau sengaja tampilkan saja. Property-nya kecil, tapi dampaknya besar buat perilaku tata letakmu. Dia ada di balik hampir semua panel scroll, modal, dan daftar berbatas yang pernah kamu pakai. Yuk, kita kuasai.
Apa arti overflow sebenarnya
Setiap elemen di CSS itu sebuah kotak. Begitu kamu kasih kotak itu tinggi atau lebar yang pasti, kamu sedang menggambar batas yang kaku. Konten di dalamnya tidak otomatis mengecil agar muat — kalau ukurannya lebih besar dari kotak, dia akan overflow, alias melampaui tepi kotaknya.
Ini contoh kotak yang kekecilan buat teksnya:
.box {
width: 200px;
height: 80px;
border: 2px solid #00B8E6;
}<div class="box">
Ini paragraf panjang yang isinya jauh lebih banyak daripada
yang bisa muat dengan nyaman di kotak kecil 200 kali 80 piksel.
</div>Tanpa aturan overflow, kelebihan teks itu akan tumpah keluar dari bawah kotak, dan sering kali menumpuk menutupi apa pun yang ada di bawahnya. Lewat property overflow-lah kamu menentukan apa yang sebaiknya terjadi pada konten yang meluber itu.
.box {
width: 200px;
height: 80px;
overflow: hidden; /* potong apa pun yang tidak muat */
}Overflow baru berlaku kalau ada batasan
Property overflow tidak punya kerjaan kecuali kontennya memang lebih besar dari kotaknya. Dan kotak baru punya ukuran tetap kalau kamu yang menentukannya — biasanya lewat height (atau max-height), kadang width. Kalau kotakmu bebas membesar mengikuti isinya, tidak ada overflow, dan overflow jadi tidak berbuat apa-apa. Jadi, masalah overflow hampir selalu berawal dari tinggi yang kamu pasang sendiri.
Empat nilai utama
overflow punya empat nilai yang bakal sering kamu pakai. Masing-masing menangani luberan dengan caranya sendiri:
| Nilai | Yang dilakukan |
|---|---|
visible |
Konten meluber keluar tepi kotak. Ini nilai bawaan. |
hidden |
Kelebihan konten dipotong — terpangkas dan tidak terlihat, tanpa scrollbar. |
scroll |
Kotak diberi scrollbar, selalu, meski tidak ada yang meluber. |
auto |
Kotak diberi scrollbar hanya saat kontennya benar-benar meluber. |
Yuk kita lihat satu per satu, karena perbedaannya benar-benar terasa di praktik.
visible: luberan bawaan
visible adalah yang kamu dapat kalau tidak melakukan apa-apa. Konten begitu saja mengabaikan batas kotak dan tampil di luarnya:
.card {
height: 100px;
overflow: visible; /* sama seperti tidak diatur sama sekali */
}Untuk kotak yang sudah diberi ukuran, nilai ini jarang jadi yang kamu inginkan, karena konten yang meluber bisa menumpuk menutupi elemen lain dan bikin tata letakmu kelihatan rusak. Tapi inilah perilaku bawaannya — dan justru karena itu kamu perlu kenal tiga nilai lainnya.
hidden: potong kelebihannya
overflow: hidden memangkas apa pun yang tidak muat. Konten yang meluber sebenarnya masih ada di DOM — cuma tidak ditampilkan, dan pengguna pun tidak punya cara untuk men-scroll ke sana:
.thumbnail {
width: 150px;
height: 150px;
overflow: hidden;
}Nilai ini benar-benar berguna. Beginilah caranya memotong gambar yang kebesaran jadi thumbnail persegi, memangkas cuplikan deskripsi yang panjang, atau menahan elemen nakal agar tidak kabur keluar dari wadahnya. Tapi hati-hati: karena konten yang dipotong jadi tidak terlihat sekaligus tidak bisa dijangkau, jangan sampai kamu tanpa sadar menyembunyikan sesuatu yang penting.
hidden bisa menelan konten diam-diam
Karena overflow: hidden memotong tanpa scrollbar apa pun, pengguna sama sekali tidak tahu masih ada konten lain. Kalau kamu memotong sebuah paragraf, sisanya hilang begitu saja dari pandangan mereka. Pakai untuk hal yang memang dimaksudkan untuk dipotong (gambar, luberan hiasan), bukan untuk teks asli yang harus dibaca.
scroll: selalu tampilkan scrollbar
overflow: scroll memasang scrollbar pada kotak apa pun kondisinya — bahkan saat kontennya muat sempurna dan tidak ada yang perlu di-scroll:
.panel {
height: 300px;
overflow: scroll;
}Karena scrollbar muncul tanpa syarat, kamu sering melihat jalur scrollbar yang kosong dan keabu-abuan meski sebenarnya tidak ada yang bisa di-scroll. Di kebanyakan tampilan, itu kelihatan agak janggal. scroll berguna saat kamu memang ingin scrollbar selalu tampak (supaya lebar tata letak tidak loncat-loncat saat konten berubah), tapi untuk pemakaian sehari-hari, nilai berikutnya biasanya pilihan yang lebih pas.
auto: scrollbar hanya saat perlu
overflow: auto adalah yang paling pintar, sekaligus yang bakal paling sering kamu andalkan. Dia berlaku seperti visible saat konten muat, dan baru menambahkan scrollbar ketika kontennya benar-benar meluber:
.chat-log {
height: 400px;
overflow: auto;
}Kalau log chat-nya cuma berisi tiga pesan, tidak ada scrollbar. Begitu isinya melampaui 400px, scrollbar muncul supaya pengguna bisa menggulungnya. Perilaku “muncul hanya kalau perlu” inilah yang kamu inginkan untuk panel scroll, sidebar, modal, dan daftar panjang. Kalau ragu antara scroll dan auto, pilih auto.
Mengatur tiap sumbu: overflow-x dan overflow-y
Sejauh ini kita memperlakukan overflow sebagai satu pengaturan saja, padahal konten bisa meluber secara mendatar atau tegak, dan kamu bisa mengatur tiap sumbunya terpisah. overflow-x mengurus sumbu mendatar (kiri–kanan), dan overflow-y mengurus sumbu tegak (atas–bawah):
.table-wrap {
overflow-x: auto; /* scroll ke samping untuk tabel lebar */
overflow-y: hidden; /* jangan pernah scroll vertikal */
}Pasangan ini adalah solusi klasik untuk tabel lebar di layar sempit: biarkan dia di-scroll ke kiri dan kanan di dalam wadahnya, sementara halamannya sendiri tetap diam. Saat kamu menulis overflow: auto sebagai satu nilai, sebenarnya kamu sedang mengatur kedua sumbu jadi auto sekaligus.
/* Dua baris ini setara */
.a { overflow: auto; }
.b { overflow-x: auto; overflow-y: auto; }Shorthand bisa menerima dua nilai
overflow bisa diberi dua nilai: yang pertama untuk overflow-x, yang kedua untuk overflow-y. Jadi overflow: hidden auto berarti “potong secara mendatar, scroll secara tegak saat perlu” — pola yang umum untuk panel yang hanya scroll vertikal. Satu nilai berlaku untuk kedua sumbu.
Contoh nyata: daftar yang bisa di-scroll
Yuk kita bikin sesuatu yang benar-benar bakal kamu pakai di proyek nyata — panel notifikasi bertinggi tetap yang akan men-scroll saat isinya kepenuhan:
.notifications {
width: 320px;
height: 360px;
overflow-y: auto; /* scroll vertikal hanya saat perlu */
border: 1px solid #d0d7de;
border-radius: 8px;
padding: 8px;
}<div class="notifications">
<div class="item">Komentar baru dari John Doe</div>
<div class="item">Jane Doe mulai mengikutimu</div>
<div class="item">Postinganmu sudah disetujui</div>
<!-- ...puluhan item lainnya... -->
</div>Panelnya tetap rapi setinggi 360px berapa pun notifikasi yang masuk. Cuma beberapa item? Dia diam saja, tanpa scrollbar. Lima puluh item? Scrollbar muncul dan pengguna bisa menggulungnya, sementara semua yang ada di sekitar panel tetap di tempatnya. Itulah kekuatan sehari-hari dari overflow-y: auto.
Efek samping tersembunyi: menampung float
Ada satu perilaku klasik yang sedikit mengejutkan dan layak kamu tahu. Mengatur overflow ke nilai apa pun selain visible akan menciptakan apa yang disebut block formatting context — dan salah satu efeknya, kotak itu jadi meregang untuk menampung anak-anaknya yang di-float:
.container {
overflow: hidden; /* sekarang kotak ini membungkus anak ber-float */
}Di era tata letak berbasis float dulu, sebuah induk akan menciut jadi setinggi nol kalau semua anaknya di-float. Menambahkan overflow: hidden (atau auto) ke induk membuatnya membungkus mereka dengan benar. Trik ini bakal kamu temui di kode-kode lama. Sekarang Flexbox dan Grid sudah membuat float nyaris tidak terpakai untuk tata letak, jadi kamu jarang berurusan dengan ini lagi — tapi kalau kamu menemukan overflow: hidden yang menyendiri di sebuah container tanpa luberan yang kelihatan, biasanya inilah alasannya.
overflow butuh tinggi agar bisa scroll vertikal
Kebingungan yang super umum: kamu sudah memasang overflow-y: auto tapi scrollbar tak kunjung muncul, dan kotaknya malah terus memanjang. Itu karena kotaknya tidak punya batas tinggi, jadi dia tidak pernah meluber — dia cuma jadi makin tinggi. Untuk scroll vertikal, kamu hampir selalu butuh height tetap atau max-height di kotak itu. Dengan max-height, kotak membesar secara alami sampai batas itu, lalu baru mulai bisa di-scroll.
Merapikan perilaku scroll
Ada beberapa property tambahan yang cocok dipasangkan dengan overflow pada kotak yang bisa di-scroll. scroll-behavior: smooth membuat scroll lewat program maupun tautan anchor meluncur mulus, bukannya loncat:
.panel {
height: 400px;
overflow-y: auto;
scroll-behavior: smooth;
}Lalu overscroll-behavior: contain mencegah scroll “bocor” ke halaman di belakangnya begitu kamu mencapai ujung kotak — berguna untuk modal dan jendela chat supaya latarnya tidak ikut ter-scroll:
.modal-body {
overflow-y: auto;
overscroll-behavior: contain;
}Sentuhan-sentuhan kecil ini memang sepele, tapi inilah yang membedakan area scroll yang terasa rapi dengan yang terasa kasar.
Praktik terbaik
Beberapa kebiasaan yang menjauhkanmu dari masalah overflow:
- Pilih
auto, bukanscroll. Kamu hampir tidak pernah benar-benar mau scrollbar yang permanen dan kosong. Biarkan kotak menambahkannya hanya saat memang dibutuhkan. - Pasangkan overflow vertikal dengan tinggi.
overflow-y: autotidak berbuat apa-apa tanpaheightataumax-heightsebagai patokan untuk meluber. - Jangan sembunyikan konten asli.
overflow: hiddenbagus untuk memotong gambar dan luberan hiasan, tapi jangan dipakai untuk memangkas teks yang harus dibaca pembaca. - Gunakan
overflow-x: autountuk tabel lebar. Bungkus tabel atau blok kode yang lebar dalam wadah yang bisa di-scroll ke samping, supaya dia tidak pernah menjebol lebar halamanmu di layar ponsel. - Ingat trik penampung float. Kalau kamu melihat
overflow: hiddendi container yang tampaknya tidak meluber, mungkin dia ada di situ untuk menampung float atau memulai formatting context baru — jangan dihapus asal-asalan.
Penutup
Property overflow adalah caramu memberi tahu sebuah kotak harus berbuat apa saat kontennya terlalu besar untuk muat, dan sekarang gambaran lengkapnya sudah kamu pegang:
- Konten yang lebih besar dari kotaknya akan overflow — dan overflow baru terjadi kalau kotaknya punya ukuran tetap.
visiblemembiarkannya meluber (bawaan),hiddenmemotongnya,scrollselalu menampilkan scrollbar, danautomenampilkannya hanya saat perlu.autoadalah juara sehari-hari untuk panel scroll, daftar, dan sidebar.overflow-xdanoverflow-ymengatur sumbu mendatar dan tegak secara terpisah; shorthand-nya bisa diberi satu atau dua nilai.- Scroll vertikal butuh
heightataumax-heightsebagai patokan. - Mengatur overflow ke nilai selain
visiblejuga membuat kotak menampung float-nya — efek samping lawas yang masih sering ditemui.
Overflow termasuk property yang diam-diam menopang banyak sekali UI di dunia nyata. Kuasai dia, dan kamu akan berhenti bergulat dengan konten yang membandel, lalu mulai membangun panel, daftar, dan tata letak yang tetap serapi rancanganmu. Berikutnya, kita akan lihat cara menjaga kotak itu sendiri tetap mudah ditebak dengan box-sizing.
