Kadang isi sebuah kotak lebih banyak dari ukuran kotaknya. Bayangin kotak setinggi 100 piksel yang diisi teks sepanjang sepuluh baris: baris yang gak muat nongol keluar dari bawah kotak dan menimpa apa pun di bawahnya. Bagian yang keluar itu disebut meluap (overflow), dan properti CSS overflow menentukan nasibnya: dibiarkan keluar, dipotong, atau dikasih scrollbar.
🧪 Tebakan cepat: kotaknya pakai
overflow: auto, tapi teksnya pendek dan muat. Scrollbar-nya muncul gak? Tebak dulu, jawabannya ada di bagian "Empat nilai overflow".
Kotak yang isinya kebanyakan
Ini kotak dengan ukuran yang dikunci, berisi teks yang lebih panjang dari kotaknya:
<div class="kotak">
<p>Teks yang panjang banget, jauh lebih panjang dari tinggi kotaknya...</p>
</div>
<style>
.kotak {
width: 200px;
height: 100px;
overflow: auto;
}
</style>
.kotakadalah selector. Semua aturan di dalam kurung kurawal{ }sesudahnya berlaku buat elemen yang punyaclass="kotak".width: 200pxdanheight: 100pxmengunci lebar dan tinggi kotak. Karena tingginya dikunci, kotaknya gak ikut memanjang waktu teksnya banyak. Di sinilah teksnya mulai meluap.overflow: auto;adalah bagian barunya: nama propertioverflow, titik dua, nilainyaauto, lalu titik koma. Artinya "kalau isinya gak muat, kasih scrollbar".
Hasilnya, kotak 200 x 100 piksel yang teksnya bisa di-scroll ke bawah sampai habis. Tanpa baris overflow, teksnya tumpah keluar dari bawah kotak.
Di latihan, aturan .kotak { ... } sudah ada. Kamu cukup menambah satu baris overflow di dalam kurung kurawal yang sama, sebelum }. Gak perlu bikin aturan baru.
Empat nilai overflow
visible: nilai bawaan, yang dipakai kalau kamu gak menulisoverflowsama sekali. Isi yang meluap tetap kelihatan, keluar dari kotak.hidden: yang meluap dipotong di tepi kotak. Gak ada scrollbar, jadi bagian yang kepotong gak bisa dibaca sama sekali.scroll: scrollbar selalu ada, bahkan waktu isinya muat.auto: scrollbar muncul cuma kalau isinya gak muat.
Jawaban tebakan: gak muncul. auto baru nampilin scrollbar waktu ada yang meluap. Itu sebabnya auto jadi pilihan aman buat kotak yang isinya kadang pendek, kadang panjang. Pakai hidden kalau bagian yang kepotong memang boleh hilang.
Mau atur satu arah aja? Pakai overflow-x (arah mendatar) atau overflow-y (arah tegak). Nilainya sama: visible, hidden, scroll, atau auto.
⚠️ Jebakan yang sering ketemu
- Menulis
overflowdi luar kurung kurawal. Barisoverflow: auto;harus ada di dalam{ }milik.kotak. Di luar itu, browser mengabaikannya. - Salah ketik nilainya.
overflow: hidengak dikenal browser, jadi diabaikan diam-diam dan kotaknya balik kevisible. - Kotak tanpa
height. Kotak yang tingginya gak dikunci ikut memanjang mengikuti isinya, jadi gak ada yang meluap danoverflowkelihatan gak ngapa-ngapain. hiddenmemotong yang sengaja keluar. Tooltip atau dropdown yang menjulur keluar kotak ikut kepotong.
TL;DR: overflow menentukan apa yang terjadi kalau isi kotak lebih besar dari kotaknya. visible (bawaan) membiarkannya keluar, hidden memotongnya, scroll selalu kasih scrollbar, auto kasih scrollbar cuma kalau perlu. Tulis di dalam aturan selector-nya, misalnya .kotak { overflow: auto; }, dan pastikan kotaknya punya ukuran yang dikunci.
