Dokumentasi CSS interaktif: Overflow

Q: Apa perbedaan overflow auto dan scroll?

scroll selalu menyediakan scrollbar, bahkan saat kontennya muat. auto hanya menampilkan scrollbar saat kontennya lebih besar daripada kotaknya, dan biasanya itulah yang kamu inginkan.

Q: Bagaimana cara membuat div bisa di-scroll?

Batasi ukurannya dan izinkan scroll: max-height: 300px; overflow-y: auto;. Tanpa batas height atau max-height, div itu membesar mengikuti kontennya dan tidak pernah meluap.

Q: Kenapa overflow-x: hidden juga menambahkan scrollbar vertikal?

Kalau salah satu sumbu bernilai hidden, scroll, atau auto, nilai visible di sumbu lainnya dihitung sebagai auto. Pakai overflow-x: clip sebagai gantinya, karena nilai ini tidak membuat scroll container dan membiarkan sumbu lainnya tetap visible.

Q: Bagaimana cara menambahkan ellipsis (...) pada teks yang meluap?

Untuk satu baris: white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pada elemen dengan lebar terbatas. Untuk beberapa baris, pakai display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;.

CSS Overflow: Hidden, Scroll, Auto, Clip dan Ellipsis

overflow menentukan apa yang terjadi pada konten yang tidak muat di kotaknya: ditampilkan, dipotong, atau diberi scrollbar. Pelajari visible, hidden, scroll, auto, dan clip, overflow-x dan overflow-y, ellipsis pada teks, serta efek samping overflow pada layout.

Halaman ini dilengkapi editor yang bisa dijalankan. Edit, jalankan, dan lihat output-nya seketika.

Oleh Kevin Spektor, Co-founder & CTO

Diterbitkan Sep 24, 2026

Apa fungsi overflow

Saat konten lebih besar daripada kotaknya (tinggi yang tetap, kata yang panjang, tabel yang lebar), konten itu meluap. Property overflow menentukan apa yang terjadi pada kelebihannya:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Overflow values</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .row { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-start; }
    .box {
      width: 150px; height: 50px; padding: 8px;
      border: 2px solid #2563eb; background: #eff6ff;
      margin-bottom: 60px;
    }
    .visible { overflow: visible; }
    .hidden { overflow: hidden; }
    .scroll { overflow: scroll; }
    .auto { overflow: auto; }
  </style>
</head>
<body>
  <div class="row">
    <div class="box visible"><b>visible</b>: this text is longer than its box, which is only 50px tall, so it overflows.</div>
    <div class="box hidden"><b>hidden</b>: this text is longer than its box, which is only 50px tall, so it overflows.</div>
    <div class="box scroll"><b>scroll</b>: this text is longer than its box, which is only 50px tall, so it overflows.</div>
    <div class="box auto"><b>auto</b>: this text is longer than its box, which is only 50px tall, so it overflows.</div>
  </div>
</body>
</html>

Nilai	Yang kamu lihat	Scroll container
`visible` (default)	Konten tumpah keluar dari kotak dan menimpa elemen setelahnya	Tidak
`hidden`	Dipotong di tepi padding, tanpa scrollbar (script masih bisa men-scroll-nya)	Ya
`clip`	Dipotong, dan tidak bisa di-scroll sama sekali, bahkan lewat script	Tidak
`scroll`	Selalu menampilkan scrollbar, meskipun kontennya muat	Ya
`auto`	Scrollbar hanya muncul saat kontennya tidak muat	Ya

Di macOS dan ponsel, scrollbar muncul di atas konten lalu memudar, jadi scroll dan auto bisa terlihat sama sampai kamu men-scroll.

Membuat kotak yang bisa di-scroll

Sebuah kotak hanya meluap kalau ada yang membatasi ukurannya. height atau max-height, ditambah overflow-y: auto, mengubah daftar panjang menjadi panel yang bisa di-scroll:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Scrollable list</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .panel {
      max-height: 160px;
      overflow-y: auto;
      border: 1px solid #d1d5db; border-radius: 8px;
    }
    .panel p { margin: 0; padding: 10px 12px; border-bottom: 1px solid #e5e7eb; }
  </style>
</head>
<body>
  <div class="panel" id="panel">
    <p>Message 1</p><p>Message 2</p><p>Message 3</p><p>Message 4</p>
    <p>Message 5</p><p>Message 6</p><p>Message 7</p><p>Message 8</p>
  </div>
</body>
</html>

Di sini max-height lebih baik daripada height: daftar yang pendek tetap pendek, dan hanya daftar yang panjang yang bisa di-scroll. Area scroll yang tidak punya konten yang bisa difokuskan di dalamnya sebaiknya diberi tabindex="0" supaya pengguna keyboard juga bisa men-scroll-nya.

overflow-x dan overflow-y

Kedua sumbu bisa diatur secara terpisah. Penggunaan yang umum adalah tabel lebar yang di-scroll ke samping di dalam container-nya, alih-alih melebarkan seluruh halaman:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Horizontal scroll</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .table-wrap { overflow-x: auto; border: 1px solid #d1d5db; max-width: 360px; }
    table { border-collapse: collapse; }
    th, td { padding: 8px 12px; white-space: nowrap; border-bottom: 1px solid #e5e7eb; }
  </style>
</head>
<body>
  <div class="table-wrap" id="wrap">
    <table>
      <tr><th>Plan</th><th>Monthly</th><th>Yearly</th><th>Users</th><th>Storage</th><th>Support</th></tr>
      <tr><td>Free</td><td>$0</td><td>$0</td><td>1</td><td>1 GB</td><td>Community</td></tr>
      <tr><td>Team</td><td>$12</td><td>$120</td><td>10</td><td>100 GB</td><td>Email</td></tr>
    </table>
  </div>
</body>
</html>

Satu aturan yang perlu diingat: kalau salah satu sumbu bernilai hidden, scroll, atau auto, nilai visible di sumbu lainnya menjadi auto. Jadi, overflow-x: hidden saja bisa memunculkan scrollbar vertikal yang tidak terduga. overflow-x: clip tidak punya efek itu:

.a { overflow-x: hidden; }  /* overflow-y computes to auto */
.b { overflow-x: clip; }    /* overflow-y stays visible */

Memotong teks dengan ellipsis

text-overflow: ellipsis mengganti ujung baris yang terpotong dengan "…". Ini butuh tiga hal sekaligus: lebar yang terbatas, teks yang tidak bisa terbungkus, dan overflow yang disembunyikan:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Ellipsis</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .one-line {
      width: 240px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      border: 1px solid #d1d5db; padding: 6px;
    }
    .three-lines {
      width: 240px; margin-top: 12px;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      overflow: hidden;
      border: 1px solid #d1d5db; padding: 6px;
    }
  </style>
</head>
<body>
  <div class="one-line" id="one">A very long file name that will not fit in the box.pdf</div>
  <div class="three-lines" id="three">This paragraph is longer than three lines. Only the first three lines are shown and the end of the third one becomes an ellipsis, which suits card previews and search results.</div>
</body>
</html>

Line clamp dengan prefix -webkit- berfungsi di Chrome, Firefox, dan Safari. Screen reader tetap membaca seluruh teksnya, jadi kata-kata yang terpotong tidak hilang bagi penggunanya.

Efek samping overflow

Mengatur overflow ke nilai apa pun selain visible atau clip mengubah lebih dari sekadar pemotongan:

Elemen menampung float dan margin child. Elemen membentuk block formatting context baru, jadi elemen itu membesar untuk membungkus child yang memakai float. display: flow-root melakukan hal yang sama tanpa memotong apa pun.
Elemen merusak position: sticky di bawahnya. Child yang sticky menempel pada scroll container terdekat. Kalau container itu tidak bisa di-scroll, tidak ada yang menempel.
Elemen memotong child yang diposisikan secara absolute (saat elemen yang meluap itu juga menjadi containing block-nya), termasuk dropdown dan tooltip, dan juga memotong box shadow milik child.

Menyembunyikan scrollbar

Kamu bisa membuat kotak tetap bisa di-scroll sambil menyembunyikan scrollbar-nya dengan scrollbar-width: none. Pakai seperlunya saja: tanpa scrollbar, banyak pembaca tidak sadar bahwa masih ada konten lain. scrollbar-gutter: stable melakukan hal sebaliknya: property ini menyediakan ruang untuk scrollbar supaya konten tidak bergeser saat scrollbar muncul.

Kesalahan yang sering terjadi

Mengharapkan overflow tanpa batas ukuran. Kotak tanpa height atau max-height akan membesar, bukan meluap.
overflow: hidden di body untuk "memperbaiki" scroll horizontal. Lebih baik cari elemen yang terlalu lebar (sering kali width yang tetap, URL yang panjang, atau 100vw bersama scrollbar).
Ellipsis tanpa white-space: nowrap. Teksnya terbungkus, jadi tidak ada yang meluap secara horizontal dan ellipsis tidak muncul.
overflow-x: hidden memunculkan scrollbar vertikal. Pakai clip.
Dropdown terpotong oleh kartunya. overflow: hidden pada kartu memotongnya. Pindahkan aturan overflow-nya atau render dropdown di luar kartu.

Pertanyaan yang sering diajukan

Apa fungsi overflow: hidden?

Deklarasi ini memotong konten yang tidak muat di dalam padding box elemen, tanpa scrollbar. Bagian yang tersembunyi masih bisa di-scroll lewat script atau dengan memfokuskan sesuatu di dalamnya.

Apa perbedaan overflow auto dan scroll?

scroll selalu menyediakan scrollbar, bahkan saat kontennya muat. auto hanya menampilkan scrollbar saat kontennya lebih besar daripada kotaknya, dan biasanya itulah yang kamu inginkan.

Bagaimana cara membuat div bisa di-scroll?

Batasi ukurannya dan izinkan scroll: max-height: 300px; overflow-y: auto;. Tanpa batas height atau max-height, div itu membesar mengikuti kontennya dan tidak pernah meluap.

Kenapa overflow-x: hidden juga menambahkan scrollbar vertikal?

Kalau salah satu sumbu bernilai hidden, scroll, atau auto, nilai visible di sumbu lainnya dihitung sebagai auto. Pakai overflow-x: clip sebagai gantinya, karena nilai ini tidak membuat scroll container dan membiarkan sumbu lainnya tetap visible.

Bagaimana cara menambahkan ellipsis (...) pada teks yang meluap?

Untuk satu baris: white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pada elemen dengan lebar terbatas. Untuk beberapa baris, pakai display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;.

Konsep terkait