CSS Display Overflow Containment

Definisi

display menentukan bagaimana sebuah elemen ikut masuk ke aliran layout. Properti ini memengaruhi apakah elemen diperlakukan sebagai blok, inline, flex container, grid container, atau dihilangkan dari render flow.

overflow menentukan apa yang terjadi saat konten lebih besar daripada kotak elemen. Properti ini mengatur clipping, scroll, dan perilaku konten yang meluber dari container.

containment sederhana di sini merujuk pada pola membatasi dampak elemen terhadap layout di sekelilingnya, terutama saat ada konten yang bisa meluber, memicu reflow besar, atau perlu dipisahkan dari ruang luar.

Kenapa penting

Banyak bug layout CSS muncul bukan karena ukuran elemen salah, tetapi karena browser membaca perilaku kotaknya dengan cara yang tidak diharapkan.

Gejala yang sering muncul:

• elemen turun ke baris baru padahal tidak diinginkan
• teks atau gambar meluber keluar card
• scroll muncul di tempat yang salah
• container seolah “tidak menahan” isi di dalamnya
• layout berubah saat konten bertambah

Kalau kamu paham display dan overflow, kamu biasanya lebih cepat menemukan sumber masalahnya: apakah masalahnya ada di aliran layout, pembentukan container, atau hanya di cara konten dipotong.

Cara kerja display

display bukan sekadar “tampilan”. Ia menentukan peran elemen di layout tree.

Secara praktis, display mengubah hal-hal berikut:

• apakah elemen memulai baris baru atau ikut di baris yang sama
• apakah lebar elemen mengikuti kontainer atau mengikuti isi
• apakah elemen bisa menerima properti layout tertentu seperti gap, justify-content, dan grid-template-*
• apakah elemen menghasilkan container untuk layout anaknya

Alur singkat

text

DOM element -> display -> role layout -> flow, sizing, and child layout behavior

Kalau display berubah, browser bisa menghitung ulang bagaimana elemen dan anak-anaknya ditempatkan.

Kapan memakai nilai display

block

Pakai block saat elemen perlu:

• memulai baris baru
• mengambil lebar penuh yang tersedia secara default
• menjadi wadah utama untuk paragraf, section, card, atau area layout

Contoh umum:

• div
• section
• article
• p
• container layout

Contoh:

css

.card {
  display: block;
}

block cocok untuk struktur utama karena perilakunya mudah ditebak: elemen berdiri sendiri, lalu elemen berikutnya turun ke bawah.

inline

Pakai inline saat elemen perlu mengalir di dalam teks atau kalimat.

Contoh umum:

• span
• a
• potongan teks kecil
• label di dalam kalimat

Contoh:

css

.badge {
  display: inline;
}

Ciri penting inline:

• tidak memaksa baris baru
• lebar dan tinggi tidak diperlakukan seperti block biasa
• margin vertikal dan sizing tertentu sering tidak berperilaku seperti yang diharapkan jika dipakai untuk layout kotak

inline-block

Pakai inline-block saat kamu ingin elemen tetap mengalir di baris yang sama, tetapi masih bisa diberi ukuran seperti box.

Cocok untuk:

• tombol kecil
• chip
• elemen inline yang butuh padding dan dimensi jelas
• label atau badge yang masih harus duduk dalam baris teks

Contoh:

css

.tag {
  display: inline-block;
  padding: 0.25rem 0.5rem;
}

inline-block berguna saat kamu butuh kompromi antara perilaku teks dan perilaku box.

flex

Pakai flex saat susunan elemen adalah satu dimensi: baris atau kolom.

Cocok untuk:

• navbar
• toolbar
• tombol aksi di card
• avatar + teks
• daftar item yang perlu ruang fleksibel
• alignment internal komponen

Contoh:

css

.toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

flex membuat container menjadi pengatur distribusi ruang untuk anaknya. Ini bukan sekadar penataan visual, tetapi perubahan cara browser menghitung alokasi ruang antar item.

grid

Pakai grid saat kamu butuh kontrol dua dimensi: baris dan kolom sekaligus.

Cocok untuk:

• layout halaman
• kartu dalam beberapa kolom
• form yang perlu struktur kolom konsisten
• area UI dengan pembagian ruang eksplisit

Contoh:

css

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}

grid lebih kuat saat layout mulai terasa sebagai peta area, bukan sekadar deretan item.

none

Pakai display: none saat elemen perlu dikeluarkan dari layout flow dan tidak dirender.

Efeknya:

• elemen tidak mengambil ruang
• elemen tidak ikut hitung layout
• elemen tidak tampil di halaman

Contoh penggunaan:

• state UI yang benar-benar disembunyikan
• panel yang belum aktif
• elemen yang tidak perlu ikut perhitungan layout sama sekali

Contoh:

css

.modal[hidden] {
  display: none;
}

Kalau tujuanmu hanya menyembunyikan visual tetapi tetap menjaga ruang, display: none bukan pilihan yang tepat.

Kapan memilih display tertentu

Pilih block jika

• elemen adalah unit struktural
• kamu ingin elemen berdiri sendiri
• alurnya lebih penting daripada kepadatan

Pilih inline jika

• elemen harus menempel di dalam teks
• kamu tidak ingin baris baru
• elemen hanya bagian kecil dari konten

Pilih inline-block jika

• elemen harus tetap mengalir seperti teks
• tapi perlu padding, ukuran, atau alignment yang lebih jelas

Pilih flex jika

• masalahnya adalah distribusi ruang satu arah
• item perlu disejajarkan atau diratakan
• kontainer adalah pengatur komponen kecil sampai menengah

Pilih grid jika

• layout melibatkan baris dan kolom sekaligus
• struktur visual perlu konsisten antar area
• kamu membagi halaman atau section besar

Pilih none jika

• elemen tidak boleh ikut layout
• elemen memang sedang nonaktif atau tidak relevan
• kamu ingin menghilangkan ruangnya juga

Cara kerja overflow

overflow menentukan apa yang terjadi saat isi melewati batas kontainer.

Nilai yang paling umum:

• visible
• hidden
• clip
• scroll
• auto

overflow: visible

Ini adalah perilaku default di banyak kasus. Konten yang meluber tetap terlihat di luar batas elemen.

Cocok jika:

• kamu memang ingin konten tetap keluar
• elemen tidak perlu menjadi batas visual yang keras

Risikonya:

• elemen bisa menimpa area lain
• layout tampak berantakan jika isi terlalu panjang

overflow: hidden

Konten yang keluar dari kotak akan dipotong.

Cocok jika:

• kamu ingin clipping visual
• kamu ingin menjaga card tetap rapi
• kamu ingin mencegah isi meluber keluar container

Efek penting:

• konten di luar box tidak terlihat
• scroll bar tidak muncul
• sering dipakai untuk masking sederhana atau untuk membersihkan float lama

overflow: clip

Mirip hidden, tetapi lebih tegas sebagai pemotongan tanpa scroll container.

Cocok jika:

• kamu hanya ingin memotong tampilan
• kamu tidak ingin elemen berubah menjadi area scroll

overflow: scroll

Selalu menyediakan scroll container, walau kontennya belum tentu meluber.

Cocok jika:

• UI membutuhkan scroll yang selalu konsisten
• kamu ingin area scroll tetap terlihat stabil

Kekurangannya:

• bisa terasa memaksa
• scrollbar dapat muncul meski belum diperlukan

overflow: auto

Scroll hanya muncul jika diperlukan.

Ini biasanya pilihan aman untuk container yang kontennya bisa berubah panjang.

Cocok untuk:

• panel teks
• daftar item
• modal body
• area data yang panjang

Contoh:

css

.panel {
  max-height: 320px;
  overflow: auto;
}

Dampak overflow pada clipping dan scroll

overflow memengaruhi tiga hal utama:

1. Clipping

Saat overflow disembunyikan atau dipotong, isi di luar batas box tidak terlihat.

Ini berguna untuk:

• crop gambar
• card dengan konten panjang
• komponen dengan sudut membulat

2. Scroll container

Saat overflow memunculkan scroll, kontainer menjadi area navigasi sendiri.

Ini berguna untuk:

• daftar panjang di panel sempit
• modal dengan isi tinggi
• sidebar yang harus tetap dalam viewport

3. Konteks interaksi visual

Konten yang meluber sering terlihat seperti bug layout, padahal akar masalahnya hanya salah memilih overflow.

Misalnya:

• teks panjang tanpa wrapping
• gambar lebih lebar dari container
• code block yang tidak dibatasi
• flex item yang tidak boleh menyusut

Masalah konten meluber

Konten meluber biasanya muncul karena salah satu dari ini:

• kontainer terlalu sempit
• elemen anak punya lebar tetap
• teks panjang tidak boleh pecah
• gambar atau media tidak dibatasi
• item flex tidak boleh shrink

Contoh umum:

css

.card {
  width: 280px;
  overflow: hidden;
}
 
.card img {
  width: 100%;
  display: block;
}

Kalau konten meluber, cek urutan berikut:

1. apakah elemen memang seharusnya ikut flow?
2. apakah display-nya sudah sesuai?
3. apakah perlu clipping atau scroll?
4. apakah ukuran anak terlalu keras?
5. apakah teks atau media perlu constraint tambahan?

Containment sederhana

Dalam praktik dasar, containment sederhana berarti membatasi pengaruh isi ke area yang tepat.

Pola yang sering dipakai:

• container diberi lebar atau max-width yang jelas
• overflow dibatasi jika isi tidak boleh keluar
• elemen internal diberi aturan sizing yang masuk akal
• komponen dibangun agar isi panjang tidak merusak layout luar

Contoh:

css

.card {
  max-width: 320px;
  overflow: hidden;
}
 
.card__title {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

Di sini, containment bukan fitur tunggal yang rumit. Intinya adalah membuat sebuah komponen cukup mandiri sehingga isi di dalamnya tidak merusak struktur di luar.

Alur keputusan display vs overflow

Diagram ini membantu membedakan dua pertanyaan yang sering tercampur:

• apakah elemen perlu berubah cara ikut layout?
• atau apakah isi elemen hanya perlu dibatasi?

Contoh praktis

1. Card konten pendek

css

.card {
  display: block;
  max-width: 320px;
}

Pakai block saat card berdiri sebagai unit sendiri.

2. Bar aksi sejajar

css

.actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

Pakai flex saat tombol perlu tersusun dalam satu jalur.

3. Daftar panjang di panel tetap

css

.sidebar {
  max-height: 100vh;
  overflow: auto;
}

Pakai overflow: auto saat isi bisa melebihi tinggi ruang yang tersedia.

4. Label di dalam teks

css

.text-label {
  display: inline;
}

Pakai inline saat elemen adalah bagian dari kalimat.

Catatan implementasi

• Jangan memakai display untuk menyelesaikan masalah yang sebenarnya ada di ukuran atau struktur anak.
• Gunakan inline-block saat butuh elemen sebaris yang tetap bisa diberi padding dan lebar.
• Gunakan flex untuk distribusi satu dimensi, bukan untuk memaksakan layout halaman penuh.
• Gunakan grid saat hubungan baris-kolom memang perlu dikontrol bersama.
• Gunakan display: none kalau elemen harus benar-benar keluar dari layout.
• Gunakan overflow: auto untuk container yang mungkin butuh scroll.
• Gunakan overflow: hidden atau clip kalau tujuan utamanya clipping, bukan scrolling.
• Kalau konten meluber, cek white-space, ukuran gambar, dan perilaku shrink pada flex item.
• Containment yang baik biasanya lahir dari kombinasi display yang tepat, sizing yang masuk akal, dan overflow yang sengaja dipilih.

Istilah

• Flow layout: cara elemen ikut aliran normal halaman.
• Clipping: pemotongan konten yang keluar dari batas box.
• Scroll container: elemen yang bisa digulir karena overflow.
• Containment: pembatasan dampak isi agar tidak merusak layout di luar komponen.
• Meluber: isi elemen melewati batas kotaknya.
• Reflow: perhitungan ulang layout oleh browser.