What does the overflow property in CSS do and when should it be used?

The overflow property in CSS determines how to handle content that exceeds the boundaries of an element's box.

• visible: Content is fully visible, overflowing the container.
• hidden: Content that exceeds the container is clipped and not visible.
• scroll: Scrollbars are always visible (horizontal and vertical), even if the content does not overflow.
• auto: Scrollbars appear only when necessary (when content overflows).

Use cases include:

• When the content of an element (e.g., text or image) might be larger than the specified size, and you need to control its display.
• To create scrollable areas within a page, such as for lists, code blocks, or tables.
• To clip unwanted overflowing content to maintain the original layout.

Example of using overflow: auto; for a block with limited height:

.scrollable-block {
  height: 200px; /* Limit the height of the block */
  overflow: auto; /* Add scrollbars if content exceeds */
  border: 1px solid #ccc; /* Add border for clarity */
  padding: 10px; /* Inner padding */
}