CSS OVERFLOW

In CSS, overflow controls what happens when content is too large to fit inside an element's box.

.box {
  width: 200px;
  height: 100px;
  overflow: auto;
}

Common values are:

• visible— content spills outside the box; this is the default.
• hidden — extra content is clipped.
• scroll — scrollbars are always provided.
• auto — scrollbars appear when needed.
• clip — clips overflowing content without providing scrolling.

You can also control each direction separately:

.box {
  overflow-x: auto;   /* horizontal */
  overflow-y: hidden; /* vertical */
}

A very common pattern for a scrollable container is:

.container {
  max-height: 300px;
  overflow-y: auto;
}

This keeps the container at a maximum height of 300px and makes its contents vertically scrollable when necessary.