What is the overflow property in CSS, how does it work, and in what cases should it be used?

The overflow property in CSS determines how to handle content that exceeds the boundaries of a block element with explicitly set sizes (width, height, max-width, max-height).

Its operation is based on controlling visibility and scrollability of the content.

Possible values:

• visible (default): Content is visible outside the block.
• hidden: Content is clipped outside the block and hidden.
• scroll: Scrollbars are always visible (horizontal and vertical), allowing content to be scrolled.
• auto: Scrollbars appear only when necessary (when content exceeds the block's size).
• overlay: Similar to auto, but scrollbars do not take up space inside the block.

The overflow-x property controls horizontal overflow, and overflow-y controls vertical overflow.

---

Examples of usage:

• Creating scrollable blocks with fixed sizes (e.g., comment list, chat window).
• Hiding part of the content that should not be displayed (e.g., a long header).
• Implementing modal windows or pop-up blocks with scrollable internal content.
• Creating scrollable areas for web applications with limited screen space.

/* Example of using overflow: auto */
.scrollable-box {
  width: 200px;
  height: 150px;
  border: 1px solid black;
  overflow: auto; /* Scrollbars appear when needed */
}

/* Example of using overflow: hidden */
.cropped-text {
  width: 100px;
  white-space: nowrap; /* Prevent line wrapping */
  overflow: hidden;    /* Clip overflowing text */
  text-overflow: ellipsis; /* Add ellipsis */
}

---

Value table:

Value	Content display	Scrollbars
visible	Content is displayed outside the block.	No
hidden	Content is clipped and hidden.	No
scroll	Scrollbars are always visible.	Yes
auto	Scrollbars appear only when necessary.	Yes (when needed)
overlay	Similar to auto, but scrollbars do not occupy space inside the block.	Yes (when needed)