Coba bayangin koper yang dipakain barang lebih banyak dari kapasitasnya. Beberapa pilihan: paksa dipencet biar nutup (barang rusak), tumpah keluar (kotak ganggu sekitar), atau pasang resleting tambahan biar bisa di-scroll (kayak koper expandable). CSS overflow ngasih kamu pilihan sama: pas konten lebih besar dari container — mau visible (tumpah), hidden (potong paksa), scroll (kasih scrollbar), atau auto (scrollbar cuma muncul kalau perlu).

💡 Aplikasi praktis sehari-hari. text-overflow: ellipsis (yang nampilin titik tiga "..." pas teks kepanjangan) butuh kombinasi 3 properti: white-space: nowrap, overflow: hidden, text-overflow: ellipsis. Hilang satu = gak jalan. Resep yang wajib dihafalin frontend dev.

Nilai overflow:

• visible — konten yang meluap tetap terlihat (default)
• hidden — konten yang meluap dipotong/disembunyikan
• scroll — selalu tampilkan scrollbar
• auto — tampilkan scrollbar hanya jika konten meluap

.container {
  width: 300px;
  height: 200px;
  overflow: auto;
}

/* Khusus arah tertentu */
.container {
  overflow-x: hidden;
  overflow-y: scroll;
}

Untuk teks yang terlalu panjang dalam satu baris, gunakan text-overflow:

.judul {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Kombinasi di atas akan menampilkan ... di akhir teks yang terpotong.

⚠️ Jebakan yang sering ditemui

• overflow: hidden di parent BIKIN sticky child tidak nempel — sticky butuh scroll context utuh.
• overflow: hidden BIKIN stacking context dan terkadang clip-path effect.
• Scrollbar makan ruang di Windows (16px) — desktop layout yang fit-perfect bisa pecah saat scrollbar muncul. Pakai scrollbar-gutter: stable.
• overflow: scroll SELALU kasih scrollbar walau konten muat — jelek. Pakai auto.
• text-overflow: ellipsis butuh trio: white-space: nowrap, overflow: hidden, text-overflow: ellipsis. Hilang satu = tidak jalan.
• Multi-line ellipsis butuh -webkit-line-clamp (vendor specific) atau modern line-clamp.
• Custom scrollbar styling browser-specific (::-webkit-scrollbar).

TL;DR: overflow ngatur konten lebih besar dari container. visible (default, tumpah keluar), hidden (potong), scroll (selalu kasih scrollbar — JELEK), auto (scrollbar muncul kalau perlu — pilih ini). overflow-x/overflow-y per axis. Recipe ellipsis WAJIB trio: white-space: nowrap + overflow: hidden + text-overflow: ellipsis. overflow: hidden di parent break sticky child. Pakai scrollbar-gutter: stable biar layout gak shift pas scrollbar muncul.