CSS Overflow

The overflow property can have the following values:

• visible: The default value. The content is not clipped and renders outside the element's box.
• hidden: The content is clipped, and the rest of the content will be invisible.
• scroll: The content is clipped, but a scrollbar is added to see the rest of the content.
• auto: Similar to scroll, but it adds scrollbars only when necessary.

div.ex1 {
  background-color: lightblue;
  width: 110px;
  height: 110px;
  overflow: scroll;
}

overflow-x and overflow-y

You can also control the overflow behavior for the horizontal (overflow-x) and vertical (overflow-y) axes independently.

div {
  overflow-x: hidden; /* Hide horizontal scrollbar */
  overflow-y: scroll; /* Add vertical scrollbar */
}