Какво прави свойството overflow в CSS и в кои случаи трябва да се използва?

Свойството overflow в CSS определя как да се обработва съдържанието, което излиза извън границите на елемента.

• visible: Съдържанието се показва напълно, дори ако излиза извън контейнера.
• hidden: Излишното съдържание, което излиза извън контейнера, се изрязва и не се вижда.
• scroll: Винаги се показват ленти за превъртане (хоризонтална и вертикална), дори ако съдържанието не излиза извън.
• auto: Лентите за превъртане се появяват само ако е необходимо (когато съдържанието излиза извън).

Използва се:

• Когато съдържанието на елемента (например, текст или изображение) може да бъде по-голямо от зададените размери и е необходимо да се управлява неговото показване.
• За създаване на области за превъртане в страницата, например за списъци, блокове с код или таблици.
• За изрязване на нежелано съдържание, което излиза извън елемента, за да се запази оригиналният макет.

Пример за използване на overflow: auto; за блок с ограничена височина:

.scrollable-block {
  height: 200px; /* Ограничаване на височината на блока */
  overflow: auto; /* Добавяне на ленти за превъртане, ако съдържанието е по-голямо */
  border: 1px solid #ccc; /* Добавяне на рамка за видимост */
  padding: 10px; /* Вътрешен отстъп */
}