min-width, max-width, min-height, dan max-height

Deklarasi width: 600px akan dipatuhi browser apa pun kondisi ruang di sekelilingnya. Pada layout nyata, ruang yang tersedia bisa lebih sempit dari angka itu — layar ponsel, kolom grid, atau panel samping yang menyempit. Di sinilah empat properti pembatas berperan: min-width , max-width , min-height , dan max-height menetapkan batas bawah dan batas atas yang dipatuhi browser setelah nilai width dan height dihitung. Chapter ini membahas urutan penerapan keempat properti tersebut beserta pola pemakaiannya pada layout responsif.

Empat Properti Pembatas dan Urutan Penerapannya #

Browser bekerja dalam dua tahap. Pertama, browser menghitung lebar tentative dari deklarasi width (atau dari algoritma auto). Kedua, browser memotong hasil itu ke max-width bila melampaui, lalu mengangkatnya ke min-width bila masih di bawah batas. Karena tahap pengangkatan terjadi setelah pemotongan, min-width menang atas max-width ketika keduanya bertentangan — batas bawah tidak boleh dilanggar, apa pun batas atasnya.

Nilai persentase pada keempat properti merujuk lebar atau tinggi containing block, sama seperti pada width dan height. Karena itu max-width: 100% menyesuaikan diri secara otomatis ketika induknya menyempit atau melebar, tanpa memerlukan media query tambahan. Adapun nilai none pada max-width dan max-height berarti tidak ada pembatasan; kita cukup menetapkan satu arah pembatas dan membiarkan arah lain bebas.

Contoh: Ketika Batas Menang atas width #

Demo chapter ini memuat empat kotak yang masing-masing menunjukkan satu aturan:

.kotak-max {
  width: 600px;
  max-width: 400px;  /* dipotong menjadi 400px */
  height: 60px;
}

.kotak-min-menang {
  width: 100px;
  min-width: 500px;  /* mengangkat kembali menjadi 500px */
  max-width: 300px;
  height: 60px;
}

.kotak-tinggi {
  width: 300px;
  height: 300px;
  max-height: 120px; /* dipotong menjadi 120px */
}

.kotak-tinggi-min {
  width: 300px;
  height: 20px;
  min-height: 90px;  /* diangkat menjadi 90px */
}

<div class="kotak-max">600px dibatasi 400px</div>
<div class="kotak-min-menang">min-width menang</div>
<div class="kotak-tinggi">300px dibatasi 120px</div>
<div class="kotak-tinggi-min">20px diangkat 90px</div>

Hasil di Browser:

Kotak yang meminta width 600px dengan max-width 400px tampil selebar
400px (computed width: 400px). Kotak dengan width 100px, min-width 500px,
dan max-width 300px tampil selebar 500px — min-width menang atas
max-width. Kotak dengan height 300px dan max-height 120px tampil setinggi
120px (computed height: 120px), dan kotak dengan height 20px serta
min-height 90px tampil setinggi 90px.

Mari kita telaah urutan penerapannya pada .kotak-min-menang:

1. Baris 2 (width: 100px): browser menghitung lebar tentative sebesar 100px.
2. Baris 4 (max-width: 300px): 100px berada di bawah batas atas, sehingga tidak ada pemotongan.
3. Baris 3 (min-width: 500px): 100px melanggar batas bawah, sehingga browser mengangkat lebar menjadi 500px.
4. Hasil akhir: lebar yang dipakai 500px — meskipun lebih besar daripada max-width: 300px. Inilah bukti bahwa batas bawah selalu menang.

Pola Praktis untuk Layout Responsif #

Dua pola berikut muncul di hampir semua proyek. Pola pertama menjaga gambar agar tidak melampaui lebar induknya:

img {
  max-width: 100%;
  height: auto;
}

Pola kedua menjaga kotak konten agar tetap nyaman di layar besar tanpa meluber di layar kecil:

.kartu {
  width: 600px;
  max-width: 100%;
}

Deklarasi width: 600px memberi lebar ideal pada layar lebar, sementara max-width: 100% memotongnya saat induk menyempit. Di layar ponsel selebar 360px, kartu tersebut tampil selebar 360px, bukan 600px. Kombinasi serupa juga dapat ditulis ringkas dengan fungsi min() — perbandingannya kita bahas pada materi fungsi nilai CSS. Sementara itu, min-width berguna untuk melindungi elemen agar tidak menyusut berlebihan, misalnya tombol dalam baris flex yang tidak boleh lebih sempit dari lebar teksnya.

Properti min-height juga berguna untuk kotak yang wajib memiliki tinggi minimum agar rapi — misalnya area pembuka halaman yang setidaknya setinggi separuh layar — sementara isinya tetap boleh tumbuh lebih tinggi. Kombinasikan min-height dengan padding agar konten tidak menempel pada tepi. Untuk kebutuhan serupa, hindari height tetap: konten yang bertambah akan meluber keluar batas yang telah ditetapkan.