In some cases you might have a lot of content in a parent element that has a limited width or height. By default, the content will be visible outside of the parent element’s bounds. With the overflow property you can decide how to display that overflowing content. Here we’ll be covering::

  • Applying overflow
  • Visible - the default
  • Hidden - clip the content
  • Scroll - always display scrollbars
  • Auto - displays scrollbars if content  overflows

Applying overflow

You can set overflow on an element in the Layout section of the Styles Panel. You may need to switch the Advanced toggle in this section to access this property.

Webflow Overflow property

An example

Overflow is applied on parent elements that have children that overflow out of the parent element’s bounds. To create an example of overflowing content, follow these steps:

  1. Drop a section on the page
  2. Drop several paragraphs into the section. (The height of the section is determined by the height of the content inside.)
  3. Set the height to 200px.

Notice how the content inside of the section overflows and can even overlap other content below the section. That happens because the elements above and below the section only care about the dimensions of the section.

Visible

Visible Overflow in Webflow

By default, elements are set to show any overflowing content. In other words, anything that goes outside the boundary of that element is visible because the default property is set to visible. The other values let you override that.

Hidden

Hidden Overflow in Webflow

Hidden clips the content that overflows.

For example, if a section has some content inside that's partially outside its boundary, you can select the section and set overflow to hidden. This will clip and hide the overflowing content.

 
This setting is helpful when running into issues of horizontal scrolling on your live site. There may be an element that’s pushing the content of the website outside of the viewport, causing activation of a horizontal scrollbar in the browser.

Scroll

Scroll Overflow in Webflow

Scroll clips the content but also adds a scrollbar so you can see the clipped content by scrolling inside the container.

For example, if you have a div block with a set height and you add a long paragraph inside, the content will overflow outside the boundary of the div block. Here, you can select the div block and add set overflow to scroll to clip the additional text and yet still be able to access it by scrolling inside the div block.

 
Overflow scroll will display a scrollbar even when there’s no overflowing content. Scrollbars are hidden on some operating systems by default.

Auto

Auto Overflow in Webflow

The auto value is similar to scroll, but it will only show a scrollbar on the element if there is overflowing content that’s clipped.