Overflow Settings

This controls what happens to your content that breaks outside of its borders.

  • Auto: if the content proceeds outside its box then that content will be hidden whilst a scroll bar should be visible for users to read the rest of the content

  • Visible: content is not clipped when it proceeds outside its box

  • Hidden: overflowing content will be hidden.

  • Clip: content is clipped when it proceeds outside its box

  • Scroll: similar to hidden except users will be able to scroll through the hidden content.

  • Inherit: sets the overflow to the value of its parent element.

  • Initial: Uses the default value, which is ‘visible’

  • Revert: Resets to the default value, ignoring changes made by the current style.

  • Unset: Acts as ;inherit; if the property is inheritable, otherwise actis as 'initial'.

See an example

Last updated