Overflow

Configure how content overflows when it becomes out of container bounds.

How it works

Specify the elements overflow, overflow-x, or overflow-y property. These classes can be applied using the following format: {overflow}-{value}. Where overflow refers to the type: overflow, overflow-x or overflow-y and value can be one of: auto, hidden, or visible

here is a list of properties:

  • overflow-auto
  • overflow-hidden
  • overflow-visible
  • overflow-x-auto
  • overflow-x-hidden
  • overflow-x-visible
  • overflow-y-auto
  • overflow-y-hidden
  • overflow-y-visible

Examples

Overflow property

overflow-auto is used to add scrollbars to an element when its content overflows the bounds. while overflow-hidden is used to clip any content that overflows the bounds. overflow-visible will prevent content from being clipped even when it overflows the bounds.

overflow/overflow.vue

Overflow X property

overflow-x can be used to specify horizontal overflows to an element if needed.

overflow/overflow-x.vue

Ready for more?

Continue your learning with related content selected by the Team or move between pages by using the navigation links below.