Open In App

Primer CSS Layout Overflow

Last Updated : 19 Apr, 2022
Comments
Improve
Suggest changes
Like Article
Like
Report

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:

HTML 
<!DOCTYPE html>
<html>

<head>
    <title>Primer CSS Layout Overflow</title>

    <link href=
"https://unpkg.com/@primer/css@^19.0.0/dist/primer.css" 
        rel="stylesheet" />

    <style>
        .GFG {
            width: 300px;
            text-align: justify;
            border: 1px solid black;
        }
        .text-center {
            padding-bottom: 500px;
        }
    </style>
</head>

<body>
    <div class="text-center">
        <h1 class="color-fg-open">
            GeeksforGeeks
        </h1>

        <h3>Primer CSS Layout Overflow</h3>

        <h4>Overflow-x-auto</h4>
        <div class="GFG d-inline-block overflow-x-auto">
            HTML stands for HyperText Markup 
            Language. It is used to design 
            web pages using a markup language. 
            HTML.is.the.combination.of.Hypertext.and.Markup.language. 
            Hypertext defines the link between 
            the web pages. A markup language 
            is used to define the text document 
            within tag which defines the 
            structure of web pages. This language 
            is used to annotate (make notes for 
            the computer) text so that a machine 
            can understand it and manipulate text 
            accordingly. Most markup languages 
            (e.g. HTML) are human-readable.
        </div>

        <h4>Overflow-x-hidden</h4>
        <div class="GFG d-inline-block overflow-x-hidden">
            HTML stands for HyperText Markup 
            Language. It is used to design 
            web pages using a markup language. 
            HTML.is.the.combination.of.Hypertext.and.Markup.language. 
            Hypertext defines the link between 
            the web pages. A markup language 
            is used to define the text document 
            within tag which defines the 
            structure of web pages. This language 
            is used to annotate (make notes for 
            the computer) text so that a machine 
            can understand it and manipulate text 
            accordingly. Most markup languages 
            (e.g. HTML) are human-readable.
        </div>

        <h4>Overflow-x-scroll</h4>
        <div class="GFG d-inline-block overflow-x-scroll">
            HTML stands for HyperText Markup 
            Language. It is used to design 
            web pages using a markup language. 
            HTML.is.the.combination.of.Hypertext.and.Markup.language. 
            Hypertext defines the link between 
            the web pages. A markup language 
            is used to define the text document 
            within tag which defines the 
            structure of web pages. This language 
            is used to annotate (make notes for 
            the computer) text so that a machine 
            can understand it and manipulate text 
            accordingly. Most markup languages 
            (e.g. HTML) are human-readable.
        </div>

        <h4>Overflow-x-visible</h4>
        <div class="GFG d-inline-block overflow-x-visible">
            HTML stands for HyperText Markup 
            Language. It is used to design 
            web pages using a markup language. 
            HTML.is.the.combination.of.Hypertext.and.Markup.language. 
            Hypertext defines the link between 
            the web pages. A markup language 
            is used to define the text document 
            within tag which defines the 
            structure of web pages. This language 
            is used to annotate (make notes for 
            the computer) text so that a machine 
            can understand it and manipulate text 
            accordingly. Most markup languages 
            (e.g. HTML) are human-readable.
        </div>
    </div>
</body>

</html>

Output:

 

Example 2:

HTML 
<!DOCTYPE html>
<html>

<head>
    <title>Primer CSS Layout Overflow</title>

    <link href=
"https://unpkg.com/@primer/css@^19.0.0/dist/primer.css" 
        rel="stylesheet" />

    <style>
        .GFG {
            width: 300px;
            height: 200px;
            text-align: justify;
            border: 1px solid black;
        }
        .text-center {
            padding-bottom: 500px;
        }
    </style>
</head>

<body>
    <div class="text-center">
        <h1 class="color-fg-open">
            GeeksforGeeks
        </h1>

        <h3>Primer CSS Layout Overflow</h3>

        <h4>Overflow-y-auto</h4>
        <div class="GFG d-inline-block overflow-y-auto">
            HTML stands for HyperText Markup 
            Language. It is used to design 
            web pages using a markup language. 
            HTML is the combination of 
            Hypertext and Markup language. 
            Hypertext defines the link between 
            the web pages. A markup language 
            is used to define the text document 
            within tag which defines the 
            structure of web pages. This language 
            is used to annotate (make notes for 
            the computer) text so that a machine 
            can understand it and manipulate text 
            accordingly. Most markup languages 
            (e.g. HTML) are human-readable.
        </div>

        <h4>Overflow-y-hidden</h4>
        <div class="GFG d-inline-block overflow-y-hidden">
            HTML stands for HyperText Markup 
            Language. It is used to design 
            web pages using a markup language. 
            HTML is the combination of 
            Hypertext and Markup language. 
            Hypertext defines the link between 
            the web pages. A markup language 
            is used to define the text document 
            within tag which defines the 
            structure of web pages. This language 
            is used to annotate (make notes for 
            the computer) text so that a machine 
            can understand it and manipulate text 
            accordingly. Most markup languages 
            (e.g. HTML) are human-readable.
        </div>

        <h4>Overflow-y-scroll</h4>
        <div class="GFG d-inline-block overflow-y-scroll">
            HTML stands for HyperText Markup 
            Language. It is used to design 
            web pages using a markup language. 
            HTML is the combination of 
            Hypertext and Markup language. 
            Hypertext defines the link between 
            the web pages. A markup language 
            is used to define the text document 
            within tag which defines the 
            structure of web pages. This language 
            is used to annotate (make notes for 
            the computer) text so that a machine 
            can understand it and manipulate text 
            accordingly. Most markup languages 
            (e.g. HTML) are human-readable.
        </div>

        <h4>Overflow-y-visible</h4>
        <div class="GFG d-inline-block overflow-y-visible">
            HTML stands for HyperText Markup 
            Language. It is used to design 
            web pages using a markup language. 
            HTML is the combination of 
            Hypertext and Markup language. 
            Hypertext defines the link between 
            the web pages. A markup language 
            is used to define the text document 
            within tag which defines the 
            structure of web pages. This language 
            is used to annotate (make notes for 
            the computer) text so that a machine 
            can understand it and manipulate text 
            accordingly. Most markup languages 
            (e.g. HTML) are human-readable.
        </div>
    </div>
</body>

</html>

Output:

 

Reference: https://primer.style/css/utilities/layout#overflow


Next Article
Primer CSS Layout Overflow

V
vkash8574
Improve
Article Tags :

Similar Reads

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox