Overflow Tailwind: Class Scroll dan Hidden — Tailwind CSS

Class overflow di Tailwind mengatur konten yang melebihi kotaknya: overflow-auto, hidden, dan scroll, plus varian per sumbu dan scroll-smooth.

Overflow adalah isi yang lebih besar dari kotaknya. Kotaknya punya tinggi tetap, isinya kepanjangan: sisanya mau diapakan? Dibiarkan nongol keluar, dipotong, atau dikasih scroll. Bayangin aplikasi chat di HP. Tingginya tetap, tapi pesannya ratusan. Aplikasinya gak ikut memanjang; kamu geser ke atas untuk membaca pesan lama. Itu overflow-y-auto: kotaknya tetap, isinya bisa digeser.

🧪 Tebakan cepat: kotak overflow-y-auto p-4 berisi 6 paragraf, tapi gak diberi h-32. Scrollbar-nya muncul? Tebak dulu, jawabannya ada di bagian "Scroll butuh tinggi".

Empat pilihan untuk isi yang meluap

Ini kotak dari latihan dan Lab:

<div id="scroll-box" class="overflow-y-auto h-32 p-4">
  <p>Paragraf 1</p>
  <p>Paragraf 2</p>
  <p>Paragraf 3</p>
  <p>Paragraf 4</p>
  <p>Paragraf 5</p>
  <p>Paragraf 6</p>
</div>

Hitung dulu ukurannya:

Bagian	Ukuran
Satu paragraf (teks 16px, tinggi baris 1,5)	24px
Enam paragraf	6 × 24 = 144px
Tinggi kotak, `h-32`	128px
Padding atas + bawah, `p-4`	16 + 16 = 32px
Ruang untuk isi	128 - 32 = 96px
Yang meluap	144 - 96 = 48px, sekitar 2 paragraf

Tinggi 128px sudah termasuk padding, karena Tailwind memakai box-sizing: border-box. Jadi 48px isinya gak muat. Nasib 48px itu ditentukan class overflow-*:

Class	CSS	Isi yang meluap
`overflow-visible`	`overflow: visible` (bawaan)	nongol keluar kotak dan menimpa yang ada di bawahnya
`overflow-hidden`	`overflow: hidden`	dipotong, gak kelihatan sama sekali
`overflow-scroll`	`overflow: scroll`	bisa digeser, scrollbar selalu dipasang walau isinya muat
`overflow-auto`	`overflow: auto`	bisa digeser, scrollbar cuma muncul kalau perlu

overflow-auto hampir selalu pilihan yang pas untuk kotak yang bisa di-scroll. overflow-scroll bikin batang scroll kosong tetap kelihatan di Windows, walaupun isinya muat.

Satu arah saja: overflow-x dan overflow-y

overflow-y-auto (overflow-y: auto) cuma mengatur arah atas-bawah. Pas untuk daftar chat, menu samping, atau kotak komentar.
overflow-x-auto (overflow-x: auto) cuma mengatur arah kiri-kanan. Pas untuk tabel lebar di HP: tabelnya bisa digeser ke samping tanpa bikin seluruh halaman ikut melebar.

Scroll butuh tinggi

Kotak <div> biasa ikut memanjang mengikuti isinya. Tanpa h-32, tinggi kotak tadi jadi 144 + 32 = 176px: semua paragraf muat, gak ada yang meluap, jadi gak ada yang bisa di-scroll. Scrollbar-nya gak muncul. Itu jawaban tebakannya. overflow-y-auto cuma bilang "kalau meluap, kasih scroll"; tinggi tetap yang bikin isinya meluap.

Alternatifnya max-h-32: kotaknya boleh memanjang sampai 128px, dan baru bisa di-scroll kalau isinya lebih dari itu. Cocok untuk daftar yang kadang pendek, kadang panjang.

Teks kepanjangan: truncate dan line-clamp

<p class="truncate">Belajar Tailwind dari nol sampai bisa bikin landing page sendiri</p>
<p class="line-clamp-2">Deskripsi produk yang panjang, dipotong sesudah dua baris...</p>

truncate menggabungkan tiga baris CSS: overflow: hidden (potong), text-overflow: ellipsis (beri titik tiga di ujung), dan white-space: nowrap (jangan turun baris). Di kotak yang sempit, judulnya jadi satu baris yang diakhiri "...".
line-clamp-2 membiarkan teksnya sampai 2 baris, lalu memotongnya dengan "..." di akhir baris kedua.

💡 Scroll yang lebih enak: snap dan smooth

<div class="flex gap-4 overflow-x-auto snap-x snap-mandatory">
  <div class="w-64 shrink-0 snap-center">Slide 1</div>
  <div class="w-64 shrink-0 snap-center">Slide 2</div>
  <div class="w-64 shrink-0 snap-center">Slide 3</div>
</div>

w-64 shrink-0: tiap slide lebarnya 256px dan gak boleh menyusut, jadi deretannya lebih lebar dari kotaknya dan bisa digeser ke samping.
snap-x snap-mandatory: setelah digeser, gulirannya selalu berhenti pas di satu slide, gak di tengah-tengah.
snap-center: slide-nya berhenti di tengah kotak.
scroll-smooth di <html> bikin link ke #bagian di halaman yang sama menggulir pelan, bukan lompat.

⚠️ Jebakan yang sering ketemu

Lupa tinggi. overflow-y-auto tanpa h-* atau max-h-*: kotaknya memanjang, gak ada scroll.
overflow-scroll padahal maksudnya auto. Batang scroll kosong muncul di Windows. Pakai overflow-auto atau overflow-y-auto.
overflow-hidden memotong yang gak sengaja. Bayangan elemen di dalamnya, atau menu yang muncul dari dalam kotak itu, ikut terpotong di tepinya.
Salah nilai di latihan. Pemeriksa mengecek overflow-y bernilai auto dan padding 16px. overflow-y-scroll (nilainya scroll) atau p-2 (8px) gak lolos.

TL;DR: overflow-visible (bawaan) membiarkan isi nongol keluar, overflow-hidden memotongnya, overflow-scroll dan overflow-auto bikin isinya bisa digeser, dengan auto cuma memunculkan scrollbar kalau perlu. Tambah -x- atau -y- untuk satu arah saja, misalnya overflow-y-auto. Scroll butuh tinggi tetap (h-32 = 128px) atau batas (max-h-32), kalau gak kotaknya ikut memanjang. Teks satu baris yang kepanjangan: truncate; dibatasi beberapa baris: line-clamp-2.