overflow-block

Definition

The overflow-block property controls the overflow of content in the block direction (i.e. vertically). It specifies the behavior of the scroll bar when the content overflows the block element's vertical axis. This property is used when the block element's height is fixed or max-height is set, and the content inside overflows the vertical axis.

Examples

This example sets the overflow-block property to auto for a div element, which means that if the content inside the element overflows the vertical axis, a vertical scroll bar will be displayed to allow the user to scroll through the content. The height property is set to 200px to limit the height of the div element:

div {
  overflow-block: auto;
  height: 200px;
}

This example sets the overflow-block property to scroll for a ul element. This will always show a vertical scroll bar, even if the content inside the ul element does not overflow the vertical axis. The max-height property is set to 300px to limit the maximum height of the ul element:

ul {
  overflow-block: scroll;
  max-height: 300px;
}

This example sets the overflow-block property to hidden for a p element. This will hide any content that overflows the vertical axis of the p element. The height property is set to 50px to limit the height of the p element:

p {
  overflow-block: hidden;
  height: 50px;
}

Values

Best Practices

• Use overflow-block: auto; for most elements, to allow the user to scroll the content vertically if it extends beyond the element's height.
• Avoid using overflow-block: visible; as it can cause the content to overlap with other elements on the page and make the layout unclear and confusing.
• When using overflow-block: scroll;, make sure to set a max-height property to limit the height of the element, so that the scrollbar is always visible and the content is easy to navigate.
• When using overflow-block: hidden;, make sure that the content is not important for the user and that the hidden content doesn't affect the overall design of the page.
• If you have a fixed header or footer, use overflow-block: auto; for the content area, so that the user can scroll through the content within the available space.

Browser Compatibility