CSS'de overflow Nedir?

CSS'de overflow, bir elementin içeriğinin sınırlarının ötesine çıktığında ne olacağını belirleyen bir özelliktir. Yani bu özellik, belirli bir boyutta oluşturulan bir elementin içerisindeki içerik, boyutun ötesine geçtiğinde ne olacağını belirler.
overflow özelliği dört değer alabilir:
1- visible: Element sınırı sınırları içinde olduğu sürece, elementin içeriği sınırları aşabilir.
Örnek kod:
.container {
width: 200px;
height: 200px;
overflow: visible;
}
2- hidden: Temel olarak, elementin içeriği sınıfın sınırları ötesine geçtiğinde görünmez olacak şekilde kesilir.
Örnek kod:
.container {
width: 200px;
height: 200px;
overflow: hidden;
}
3- scroll: Element sınırı sınırları içinde olduğu sürece, elementin içeriği sınırları aşarsa kaydırma çubukları görüntülenir.
Örnek Kod:
.container {
width: 200px;
height: 200px;
overflow: scroll;
}
4- auto: Scroll özelliğine benzer şekilde, elementin içeriği sınırın ötesine geçtiğinde kaydırma çubukları görünür.
Örnek Kod:
.container {
width: 200px;
height: 200px;
overflow: auto;
}
Bu özellik, görsel tasarımcıların belirli bir boyutta oluşturulan bir elementin, içerik boyutunu aşarsa ne olacağını belirlemelerine olanak sağlar. Bu sayede web sayfaları daha düzenli ve estetik bir görünüm kazanır.