Primer CSS Layout Overflow

Primer CSS is a free open-source CSS framework that is built upon systems that create the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are steady and interoperable with every other. Its approach to CSS is influenced by Object-Oriented CSS principles, functional CSS, and BEM architecture. It is highly reusable and flexible.

The layout is used to display the content using particular style. For example - we can change the layout of document by using display, float, alignment, and other utilities.

Primer CSS Overflow Layout is used to set the visibility overflow of the content. Overflow can be set in x and y-axis independently. 

Used Classes:

• .overflow-x-auto - It is used to set the scrollbar on x-axis if required.
• .overflow-x-hidden - It is used to hide the overflow content on x-axis.
• .overflow-x-scroll - It is used to create a scrollbar on x-axis.
• .overflow-x-visible - It is used to display all overflow content outside the box on x-axis.
• .overflow-y-auto -  It is used to set the scrollbar on y-axis if required.
• .overflow-y-hidden - It is used to hide the overflow content on y-axis.
• .overflow-y-scroll - It is used to create a scrollbar on y-axis.
• .overflow-y-visible - It is used to display all overflow content outside the box on y-axis.

Syntax:

<div class="overflow-*"> Content... </div>

Example 1:

Output:

👁 Image

Example 2:

Output:

👁 Image

Reference: https://primer.style/product/css-utilities/#overflow