Mencegah Horizontal Overflow

Halaman responsif yang sehat menggulir secara vertikal saja; begitu scrollbar horizontal muncul, ada elemen yang lebih lebar dari viewport — dan di ponsel, elemen itu menggeser seluruh halaman setiap kali pengguna menyentuh layar. Chapter ini menyusun daftar penyebab yang paling sering ditemui, teknik melacak elemen pelakunya lewat DevTools, dan resep perbaikan yang bisa langsung dipasang.

Enam Penyebab Paling Umum #

Hampir semua kasus overflow horizontal kembali ke salah satu penyebab berikut:

Dua penyebab teratas sudah kita tangani di chapter sebelumnya; dua penyebab di tengah punya perbaikan khusus yang dibedah di bawah.

Melacak Pelaku di DevTools #

Menemukan elemen yang menonjol adalah keterampilan tersendiri. Lima langkah yang terbukti andal:

1. Buka device toolbar (pembahasannya lengkap di chapter berikutnya) dan kecilkan lebar sampai scrollbar horizontal muncul.
2. Geser halaman ke kanan; elemen pelaku biasanya terlihat menonjol di tepi.
3. Klik kanan bagian yang menonjol lalu pilih Inspect untuk melompat ke elemennya di panel Elements.
4. Belum ketemu? Naik satu tingkat ke induknya, lalu satu tingkat lagi ke atas — bandingkan lebar tiap elemen dengan lebar viewport sampai titik lonjakannya ditemukan.
5. Butuh peta visual? Pasang aturan sementara berikut, lalu kotak yang menonjol akan tergambar langsung:

/* aturan sementara: perlihatkan batas semua kotak */
* {
  outline: 1px solid red;
}

Setelah pelaku ditemukan, petakan penyebabnya ke tabel di atas — perbaikan yang tepat sasaran biasanya hanya satu deklarasi.

Resep Perbaikan #

.item-flex {
  min-width: 0;              /* izinkan item flex menyusut di bawah lebar kontennya */
}
.url-panjang {
  overflow-wrap: anywhere;   /* string panjang boleh dipotong di titik mana pun */
}
.banner-utama {
  width: 100%;               /* bukan 100vw: lebar scrollbar tidak ikut dihitung */
}

min-width: 0 adalah kunci yang paling sering terlupa: item flex secara bawaan menolak menyusut di bawah lebar minimum kontennya (min-width: auto), dan string panjang menaikkan nilai minimum itu. Deklarasi min-width: 0 melepas kunci tersebut — padanannya di grid adalah menulis track sebagai minmax(0, 1fr) seperti yang kita pakai di section CSS Grid. Untuk string panjang, overflow-wrap: anywhere mengizinkan pemenggalan di titik mana pun dan membuat lebar minimum kontainer ikut mengecil — berbeda dengan break-word yang baru memenggal setelah teks melampaui baris.

Demo berikut menempatkan satu URL panjang pada dua panel sempit — pertama tanpa perlindungan, kedua dengan overflow-wrap: anywhere:

Tonjolan seperti pada panel pertama inilah yang di layar ponsel mendorong dokumen melebar dan memunculkan scrollbar horizontal.

Satu pengecualian yang sah: menggulir secara horizontal di dalam komponen memang dirancang untuk tabel lebar atau blok kode — yang kita lawan adalah menggulirnya di level halaman:

.pembungkus-tabel {
  overflow-x: auto;    /* gulir di dalam komponen; halaman tetap diam */
}

Dengan pola ini, tabel yang lebar menggulir di dalam kotaknya sendiri dan layout halaman tidak terganggu — blok kode pada course ini memakai pola yang sama.

Ringkasan #

Overflow horizontal hampir selalu berasal dari satu elemen yang menolak menyempit: lebar tetap, string tak terputus, gambar tanpa pengaman, atau item flex tanpa min-width: 0. Melacaknya adalah keterampilan DevTools; mencegahnya adalah kebiasaan — pasang pengaman di awal proyek, bukan setelah keluhan datang. Setelah perbaikan terpasang, tugas kita adalah memastikan semua ukuran layar benar-benar lolos uji: alat dan checklist-nya menanti di chapter berikutnya.