Primer CSS Layout Overflow
Last Updated :
19 Apr, 2022
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
Similar Reads
Primer CSS Layout Primer CSS is a free and open-source CSS framework. It is built upon the systems that create the foundation of the basic style elements such as spacing, typography, and color. Created with GitHub’s design system, it is highly reusable and flexible.Primer CSS Layout is used to change the document lay
2 min read
Primer CSS Layout Position Primer CSS is a free open-source CSS framework that is built with the GitHub design system to provide support to the broad spectrum of Github websites. It creates the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure that our patterns ar
3 min read
CSS overflow Property The CSS overflow property is used to set the overflow behavior of an element. It is the shorthand property of overflow-x and overflow-y properties. This property is used to control the large content.Syntax:overflow: visible | hidden | clip | scroll | auto;Property Values:visible: The content is not
2 min read
Primer CSS Marketing Layout 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. It is highly reusable and flexible. It is created with GitHub’s design system. Primer CSS Layout is used to change the document lay
3 min read
CSS overflow-y Property The overflow-y property of CSS specifies the behavior of content when it overflows a block-level element's top and bottom edges. The content may be clipped, hidden or a scrollbar may be displayed accordingly based on the value assigned to the overflow-y property. Syntax: overflow-y: scroll | hidden
5 min read
CSS overflow-x Property The overflow-x property in CSS specifies whether to add a scroll bar, clip the content, or display overflow content of a block-level element, when it overflows at the left and right edges. In other words, this property helps us to display the content which is overflowing from the page horizontally.T
3 min read
Primer CSS Layout - Nesting Layouts Primer CSS is a free and open-source CSS framework that is built using the GitHub design system for providing support to the broad spectrum of GitHub websites. It helps in creating the foundation of the basic style elements such as spacing, components, typography, color, etc. In this article, we wil
2 min read
Primer CSS Layout Floats 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
2 min read
Primer CSS Layout Display 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
2 min read
Primer CSS Layout The media object Primer CSS is a free and open-source CSS framework that is built using the GitHub design system for providing support to the broad spectrum of GitHub websites. It helps in creating the foundation of the basic style elements such as spacing, components, typography, color, etc. In this article, we wil
2 min read