Setelah kita mempelajari ukuran elemen (width, height, min/max), sekarang saatnya mengenal properti overflow. Overflow mengatur apa yang terjadi ketika konten lebih besar dari container-nya. Ini sangat penting untuk mengatasi konten yang meluber dan membuat scroll area.
Apa Itu Overflow?
Properti overflow menentukan bagaimana browser menangani konten yang melebihi ukuran elemen. Misalnya, jika Anda menentukan height: 100px pada sebuah div, tetapi isinya lebih dari 100px, maka overflow menentukan apakah konten tersebut terpotong, muncul scrollbar, atau meluber ke luar.
Nilai-nilai Overflow:
-
-
-
-
-
visible (default) → konten meluber keluar container (tidak terpotong)
-
hidden → konten yang meluber terpotong (tidak terlihat)
-
scroll → selalu menampilkan scrollbar (horizontal dan vertikal)
-
auto → menampilkan scrollbar hanya jika diperlukan
1. overflow: visible (Default)
Nilai default. Konten yang meluber akan keluar dari container dan tetap terlihat.
Contoh:
<style>
.box-visible {
width: 200px;
height: 100px;
background: #3b82f6;
color: white;
padding: 10px;
overflow: visible;
margin-bottom: 20px;
}
</style>
<div class="box-visible">
Konten ini sangat panjang sekali sehingga melebihi tinggi container yang hanya 100px, dan karena overflow: visible, kelebihan konten akan keluar dari kotak dan tetap terlihat.
</div>
Konten ini sangat panjang sehingga melebihi tinggi container (80px), dan karena overflow: visible, kelebihan konten keluar dari kotak dan tetap terlihat.
Perhatikan teks yang keluar dari kotak biru (meluber ke bawah).
Kapan menggunakan visible?
Visible adalah default, biasanya tidak perlu diubah. Namun visible bisa mengganggu layout jika konten meluber ke area lain.
Visible adalah default, biasanya tidak perlu diubah. Namun visible bisa mengganggu layout jika konten meluber ke area lain.
2. overflow: hidden
Konten yang meluber dipotong / terpotong dan tidak terlihat.
Contoh:
<style>
.box-hidden {
width: 200px;
height: 100px;
background: #22c55e;
color: white;
padding: 10px;
overflow: hidden;
}
</style>
<div class="box-hidden">
Konten ini sangat panjang melebihi tinggi container. Karena overflow: hidden, kelebihan konten akan terpotong dan tidak terlihat.
</div>
Teks yang melebihi 80px tidak terlihat (terpotong).
Kegunaan overflow: hidden:
- Membuat efek clearfix (mengatasi float)
- Membuat rounded corner bekerja untuk gambar di dalam border-radius
- Menyembunyikan konten yang tidak ingin ditampilkan
- Mencegah layout berantakan karena konten meluber
3. overflow: scroll
Menampilkan scrollbar horizontal DAN vertikal (keduanya), meskipun konten tidak perlu discroll.
Contoh:
<style>
.box-scroll {
width: 200px;
height: 100px;
background: #f59e0b;
color: white;
padding: 10px;
overflow: scroll;
}
</style>
<div class="box-scroll">
Konten ini agak panjang, tetapi tidak terlalu ekstrim. Scrollbar tetap muncul meskipun konten tidak melebihi area.
</div>
Konten ini tidak terlalu panjang, tetapi scrollbar tetap muncul (vertikal dan horizontal) karena overflow: scroll.
Scrollbar muncul meskipun tidak diperlukan (tidak estetis).
Catatan overflow: scroll:
- Scrollbar muncul di kedua sumbu (horizontal dan vertikal) walaupun tidak diperlukan.
- Kadang tidak diinginkan karena mengganggu tampilan.
- Gunakan
- Scrollbar muncul di kedua sumbu (horizontal dan vertikal) walaupun tidak diperlukan.
- Kadang tidak diinginkan karena mengganggu tampilan.
- Gunakan
overflow-x dan overflow-y untuk kontrol per sumbu.
4. overflow: auto
Menampilkan scrollbar hanya jika diperlukan (paling disarankan).
Contoh:
<style>
.box-auto {
width: 200px;
height: 100px;
background: #8b5cf6;
color: white;
padding: 10px;
overflow: auto;
}
</style>
<div class="box-auto">
Konten ini cukup panjang sehingga melebihi tinggi container yang 100px. Karena overflow: auto, scrollbar vertikal akan muncul secara otomatis.
</div>
Konten ini cukup panjang sehingga melebihi tinggi container 80px. Scrollbar vertikal muncul secara otomatis karena diperlukan.
Scrollbar muncul hanya karena konten melebihi tinggi (tidak muncul horizontal).
Rekomendasi: Gunakan
overflow: auto untuk area yang mungkin membutuhkan scroll, agar scrollbar hanya muncul ketika diperlukan.
Overflow-x dan Overflow-y
Kita bisa mengontrol scroll secara horizontal (x) dan vertikal (y) secara terpisah.
| Properti | Fungsi | Contoh |
|---|---|---|
overflow-x |
Scroll horizontal (kiri/kanan) | overflow-x: auto; |
overflow-y |
Scroll vertikal (atas/bawah) | overflow-y: scroll; |
Contoh overflow-x dan overflow-y:
<style>
.box-custom {
width: 200px;
height: 100px;
background: #ec489a;
color: white;
padding: 10px;
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
}
</style>
<div class="box-custom">
Teks yang sangat panjang sekali sehingga menyebabkan scroll horizontal karena white-space: nowrap. Scroll vertikal tidak ada.
</div>
Hanya scroll horizontal yang muncul (overflow-y: hidden).
Contoh Proyek: Area Komentar dengan Overflow Auto
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Overflow Demo - Komentar</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: #f0f4f8;
padding: 40px 20px;
}
.container {
max-width: 600px;
margin: 0 auto;
background: white;
border-radius: 20px;
padding: 25px;
box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}
h1 {
text-align: center;
margin-bottom: 10px;
}
/* Area komentar dengan overflow auto */
.comments-section {
margin: 20px 0;
}
.comments-title {
margin-bottom: 15px;
color: #1e293b;
}
.comments-list {
background: #f8fafc;
border-radius: 12px;
padding: 15px;
max-height: 300px;
overflow-y: auto;
border: 1px solid #e2e8f0;
}
.comment {
background: white;
border-radius: 12px;
padding: 15px;
margin-bottom: 15px;
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.comment:last-child {
margin-bottom: 0;
}
.comment-author {
font-weight: bold;
color: #3b82f6;
margin-bottom: 8px;
}
.comment-text {
color: #334155;
line-height: 1.5;
}
/* Form komentar */
.comment-form {
margin-top: 20px;
display: flex;
gap: 10px;
}
.comment-form input {
flex: 1;
padding: 12px;
border: 2px solid #e2e8f0;
border-radius: 8px;
transition: border-color 0.2s;
}
.comment-form input:focus {
outline: none;
border-color: #3b82f6;
}
.comment-form button {
background: #3b82f6;
color: white;
border: none;
padding: 12px 20px;
border-radius: 8px;
cursor: pointer;
}
/* Demo overflow lainnya */
.demo-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
margin: 30px 0;
}
.demo-card {
background: #f8fafc;
border-radius: 12px;
padding: 15px;
text-align: center;
}
.demo-card h3 {
margin-bottom: 10px;
}
.demo-box {
background: #3b82f6;
color: white;
width: 100%;
height: 80px;
border-radius: 8px;
margin-top: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
}
.visible-box { overflow: visible; }
.hidden-box { overflow: hidden; }
.scroll-box { overflow: scroll; }
.auto-box { overflow: auto; }
.long-text {
white-space: nowrap;
overflow-x: auto;
background: #fef9c3;
padding: 10px;
border-radius: 8px;
margin: 15px 0;
}
.info-box {
background: #eef2ff;
padding: 20px;
border-radius: 12px;
margin-top: 20px;
}
.info-box code {
background: #e2e8f0;
padding: 2px 6px;
border-radius: 4px;
font-family: monospace;
}
footer {
text-align: center;
margin-top: 30px;
padding: 20px;
color: #64748b;
border-top: 1px solid #e2e8f0;
}
@media (max-width: 640px) {
.comment-form {
flex-direction: column;
}
}
</style>
</head>
<body>
<div class="container">
<h1>Belajar Overflow CSS</h1>
<p style="text-align: center; margin-bottom: 20px;">visible, hidden, scroll, auto</p>
<!-- DEMO 4 NILAI OVERFLOW -->
<div class="demo-grid">
<div class="demo-card">
<h3>visible</h3>
<div class="demo-box visible-box" style="align-items: flex-start; justify-content: flex-start; white-space: normal;">
Teks panjang melebihi batas kotak akan keluar.
</div>
<p style="font-size: 12px; margin-top: 8px;">Konten meluber ke luar</p>
</div>
<div class="demo-card">
<h3>hidden</h3>
<div class="demo-box hidden-box" style="align-items: flex-start; justify-content: flex-start; white-space: normal;">
Teks panjang melebihi batas kotak akan terpotong dan tidak terlihat.
</div>
<p style="font-size: 12px; margin-top: 8px;">Konten terpotong</p>
</div>
<div class="demo-card">
<h3>scroll</h3>
<div class="demo-box scroll-box" style="align-items: flex-start; justify-content: flex-start; white-space: normal;">
Teks panjang melebihi batas kotak. Scrollbar selalu muncul.
</div>
<p style="font-size: 12px; margin-top: 8px;">Scrollbar selalu ada</p>
</div>
<div class="demo-card">
<h3>auto</h3>
<div class="demo-box auto-box" style="align-items: flex-start; justify-content: flex-start; white-space: normal;">
Teks panjang melebihi batas kotak. Scrollbar muncul hanya jika diperlukan.
</div>
<p style="font-size: 12px; margin-top: 8px;">Scrollbar hanya jika perlu</p>
</div>
</div>
<!-- SCROLL HORIZONTAL -->
<div class="long-text">
Teks yang sangat panjang sehingga menyebabkan scroll horizontal. Gunakan overflow-x: auto untuk menangani konten yang lebar.
</div>
<!-- AREA KOMENTAR DENGAN OVERFLOW AUTO -->
<div class="comments-section">
<h2 class="comments-title">Komentar (max-height: 300px, overflow-y: auto)</h2>
<div class="comments-list" id="commentsList">
<div class="comment">
<div class="comment-author">Budi</div>
<div class="comment-text">Artikel yang sangat bermanfaat! Terima kasih.</div>
</div>
<div class="comment">
<div class="comment-author">Ani</div>
<div class="comment-text">Saya baru belajar overflow, jadi sangat terbantu.</div>
</div>
<div class="comment">
<div class="comment-author">Citra</div>
<div class="comment-text">Contohnya jelas dan mudah dipahami. Terima kasih!</div>
</div>
<div class="comment">
<div class="comment-author">Dedi</div>
<div class="comment-text">Kapan materi tentang flexbox dan grid?</div>
</div>
<div class="comment">
<div class="comment-author">Eka</div>
<div class="comment-text">Overflow auto sangat berguna untuk area komentar seperti ini.</div>
</div>
</div>
<div class="comment-form">
<input type="text" id="commentInput" placeholder="Tulis komentar...">
<button id="addCommentBtn">Kirim</button>
</div>
</div>
<div class="info-box">
<h3>Ringkasan Nilai Overflow</h3>
<ul>
<li><code>overflow: visible</code> (default) → konten meluber keluar, tidak terpotong</li>
<li><code>overflow: hidden</code> → konten terpotong, tidak terlihat</li>
<li><code>overflow: scroll</code> → scrollbar selalu muncul (kedua sumbu)</li>
<li><code>overflow: auto</code> → scrollbar muncul hanya jika diperlukan (paling disarankan)</li>
<li><code>overflow-x</code> dan <code>overflow-y</code> → kontrol per sumbu</li>
</ul>
<h3 style="margin-top: 15px;">Penggunaan Umum:</h3>
<ul>
<li>Area komentar / chat → <code>overflow-y: auto</code></li>
<li>Tabel responsif → <code>overflow-x: auto</code> pada wrapper</li>
<li>Membuat rounded corner untuk gambar → <code>overflow: hidden</code> + <code>border-radius</code></li>
<li>Mengatasi float (clearfix) → <code>overflow: hidden</code> atau <code>auto</code></li>
</ul>
</div>
</div>
<footer>
<p>© 2024 - Belajar CSS Overflow | visible, hidden, scroll, auto</p>
</footer>
<script>
// Menambahkan komentar baru ke area komentar
const commentInput = document.getElementById('commentInput');
const addBtn = document.getElementById('addCommentBtn');
const commentsList = document.getElementById('commentsList');
function addComment() {
const text = commentInput.value.trim();
if (text === "") {
alert("Harap isi komentar terlebih dahulu!");
return;
}
const newComment = document.createElement('div');
newComment.className = 'comment';
newComment.innerHTML = `
<div class="comment-author">Anda</div>
<div class="comment-text">${text}</div>
`;
commentsList.appendChild(newComment);
// Scroll otomatis ke bawah
commentsList.scrollTop = commentsList.scrollHeight;
commentInput.value = "";
}
addBtn.addEventListener('click', addComment);
commentInput.addEventListener('keypress', function(e) {
if (e.key === 'Enter') {
addComment();
}
});
</script>
</body>
</html>
Hasil visual halaman:
Penggunaan Umum Overflow
1. Membuat Tabel Responsif dengan overflow-x: auto
<style>
.table-wrapper {
overflow-x: auto;
}
table {
width: 100%;
border-collapse: collapse;
min-width: 600px;
}
</style>
<div class="table-wrapper">
<table>
<!-- tabel dengan banyak kolom -->
</table>
</div>
2. Membulatkan Sudut Gambar dengan overflow: hidden
<style>
.rounded-img {
width: 150px;
height: 150px;
border-radius: 50%;
overflow: hidden;
}
.rounded-img img {
width: 100%;
height: 100%;
object-fit: cover;
}
</style>
<div class="rounded-img">
<img src="foto.jpg" alt="foto">
</div>
3. Membuat Dropdown Menu dengan overflow: visible (default)
Dropdown menu biasanya menggunakan overflow: visible agar konten dropdown bisa keluar dari container.
Kesalahan Umum Pemula
- Mengira overflow: hidden bisa menyembunyikan konten di luar parent → Benar, tapi hati-hati karena bisa memotong elemen absolut (position: absolute) yang ada di dalamnya.
- Menggunakan overflow: scroll tanpa kebutuhan → Scrollbar yang tidak perlu mengganggu tampilan. Gunakan auto.
- Lupa bahwa overflow-x dan overflow-y bisa saling mempengaruhi → Jika overflow-x: auto dan overflow-y: visible, nilai visible akan berubah menjadi auto.
- Mengira teks yang terpotong karena overflow: hidden hilang dari DOM → Tidak, teks tetap ada di DOM, hanya tidak terlihat.
Debugging Tips:
- Buka Developer Tools (F12) → inspect elemen → cek apakah overflow berfungsi dengan scroll atau terpotong.
- Jika konten terpotong tidak diinginkan, cek apakah overflow: hidden atau overflow: auto dengan tinggi terbatas.
- Gunakan outline untuk melihat batas elemen.
Latihan Singkat
- Buat div dengan tinggi 100px, lebar 200px, isi teks panjang. Coba ubah overflow: visible, hidden, scroll, auto.
- Buat area komentar dengan max-height: 150px dan overflow-y: auto, tambahkan beberapa komentar hingga scroll muncul.
- Buat tabel dengan banyak kolom, bungkus dengan div yang memiliki overflow-x: auto agar responsif di HP.
- Buat gambar dalam container dengan border-radius: 50% dan overflow: hidden untuk membuat lingkaran sempurna.
- Buat teks horizontal panjang dengan white-space: nowrap dan overflow-x: auto.
Intisari Hari Ini
- overflow: visible (default) → konten meluber ke luar
- overflow: hidden → konten terpotong (tidak terlihat)
- overflow: scroll → scrollbar selalu muncul (kedua sumbu)
- overflow: auto → scrollbar hanya jika diperlukan (paling disarankan)
- overflow-x dan overflow-y → kontrol per sumbu horizontal/vertikal
- Gunakan overflow untuk: area komentar, tabel responsif, membuat rounded corner, mengatasi float.
Tantangan: Buat sebuah Halaman Dashboard dengan Panel yang Dapat Discroll! Persyaratan:
Selamat mencoba!
- Panel daftar pesanan memiliki tinggi maksimal 250px dan overflow-y: auto
- Panel tabel produk memiliki overflow-x: auto agar responsif di layar kecil
- Card statistik memiliki overflow: hidden untuk membulatkan sudut gambar di dalamnya
- Tooltip atau dropdown yang meluber keluar container harus tetap terlihat (overflow: visible)
- Tambahkan kotak penjelasan yang menunjukkan nilai overflow mana yang digunakan di setiap komponen
Selamat mencoba!
Artikel Sebelumnya: CSS Dasar #17 - Width, Height, Min-Width, Max-Width, Min-Height, Max-Height
Artikel Selanjutnya: CSS Dasar #19 - Position Static dan Relative