Fungsi dan kegunaan CSS overflow

Kegunaan overflow

Apakah Anda pernah mengalami lebar dan tinggi pada suatu elemen melebihi dari kontent?. Ruang yang tidak cukup untuk mengakomodasi konten maka secara otomatis akan meluber ke luar wadah. Dengan properti CSS overflow semuanya bisa diatasi, Anda bisa memilih apakah konten akan dipotong, membuat bilah gulir atau menampilkan konten keluar dari elemen blok.

Kemungkinan nilai dari properti ini adalah visible, hidden, scroll dan auto.

Overflow dengan nilai visible

Secara default, nilai dari properti overflow adalah visible, yang berarti bahwa itu tidak dipotong dan bisa meluber keluar dari wadah elemen.

div {
    background-color: #ddd;
    width: 200px;
    height: 50px;
    padding: 20px;
    overflow: visible;
}

Overflow dengan nilai hidden

Jika Anda ingin menyembunyikan konten yang keluar dari wadahnya, yang dimana lebar dan tinggi pada suatu elemen melebihi dari konten, maka dengan nilai hidden lah solusinya. Nilai hidden akan memotong konten yang meluber keluar dan sisanya akan disembunyikan.

div {
    background-color: #ddd;
    width: 200px;
    height: 30px;
    overflow: hidden;
}

Overflow dengan nilai scroll

Jika Anda ingin menampilkan konten walaupun lebar dan tinggi pada suatu elemen melebihi dari konten, maka dengan nilai scroll lah solusinya. Dengan nilai scroll konten yang meluber akan dipotong dan scrollbar akan ditambahkan untuk menggulir didalam kotak.

div {
    background-color: #ddd;
    width: 200px;
    height: 80px;
    overflow: scroll;
}

Overflow dengan nilai auto

Jika Anda menggunakan properti overflow dengan nilai scroll, maka akan menambahkan scrollbar secara horizontal dan vertikal. Namun sayangnya akan menambahkan scrollbar meskipun konten tidak meluber.

Untuk solusi tersebut maka nilai auto lah yang bisa diandalkan. Hampir sama kegunaannya dengan nilai scroll, hanya saja dengan nilai auto akan menambahkan scrollbar secara vertikal jika konten meluber keluar.

div {
    background-color: #ddd;
    width: 200px;
    height: 80px;
    overflow: auto;
}