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 X property
overflow-x can be used to specify horizontal overflows to an element if needed.
Ready for more?
Continue your learning with related content selected by the Team or move between pages by using the navigation links below.
Edit this page onGitHub