CSS Overflow

overflow controls what happens when content is too big for its box.

CSS

.box {
  height: 100px;
  overflow: visible; /* default — content spills outside the box */
  overflow: hidden;  /* clips anything past the box's edge */
  overflow: scroll;  /* always shows scrollbars, even if content fits */
  overflow: auto;    /* scrollbars only appear when needed */
}

Set it per axis with overflow-x/overflow-y — a common pattern is a horizontally-scrolling row of cards:

CSS

.carousel {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
}

overflow: hidden is also frequently used just to clip a rounded-corner container's contents (e.g. an image with border-radius that would otherwise poke past the rounded edge).

Keep learning