CSS overflow

By default, the overflow is visible, meaning that it is not clipped and it renders outside the element’s box:

div {
  width: 200px;
  height: 65px;
  background-color: coral;
  overflow: visible;
}

With the hidden value, the overflow is clipped, and the rest of the content is hidden:

div {
  overflow: hidden;
}

Setting the value to scroll, the overflow is clipped and a scrollbar is added to scroll inside the box. Note that this will add a scrollbar both horizontally and vertically (even if you do not need it):

div {
  overflow: scroll;
}

The auto value is similar to scroll, but it adds scrollbars only when necessary:

div {
  overflow: auto;
}

The overflow-x and overflow-y properties in CSS are used to control the overflow behavior of a container element along the horizontal and vertical axes, respectively.

The overflow-x property controls the horizontal overflow behavior, and the overflow-y property controls the vertical overflow behavior. Both properties can have the following values:

• visible : This is the default value, and it indicates that the overflow is not clipped, and the content can be displayed outside the element’s boundaries.
• hidden : This value indicates that any content that overflows the element’s boundaries should be hidden and not displayed.
• scroll : This value indicates that the element should provide scrollbars if the content overflows its boundaries.
• auto : This value is similar to scroll , but it only adds scrollbars when necessary. If the content fits within the element’s boundaries, no scrollbars are displayed.

Here’s an example of how to use overflow-x and overflow-y to control the overflow behavior of a container:

.container {
  width: 200px;
  height: 200px;
  border: 1px solid black;
  overflow-x: scroll;
  overflow-y: hidden;
}

In this example, the .container element has a fixed width and height, and a black border. The overflow-x property is set to scroll , which means that horizontal scrollbars will be displayed if the content overflows the element’s width. The overflow-y property is set to hidden , which means that any content that overflows the element’s height will be hidden and not displayed.

By using the overflow-x and overflow-y properties, we can control the overflow behavior of a container element and ensure that the content is displayed in the desired way, with or without scrollbars as needed.