How to fix CSS underflow & overflow ?
Last Updated :
02 Aug, 2022
In this article, we’ll see how to manage the overflow issue in CSS. This type of issue generally arises when the content exceeds the container size or when the dimension(i.e. width and height) of the container is fixed. Here, the content can be text or an image and the container can be a <div> tag or another HTML tag that contains the text or image. For instance, the below image illustrates the fixed length of the container size for which the content is overflowing from the container.
Overflow of the text
The problem of an overflow of the content when the size of the container is fixed can be accomplished with the help of the below 2 methods:
- By making container size modifiable
- By applying overflow-related properties provided by CSS
We will explore both these approaches in detail & understand them through the illustrations.
By making container size modifiable: This task can be accomplished with the help of the CSS min-height property which sets the minimum height of the container. The minimum height will only be applicable if the content is within or small in size in comparison to the minimum height. Otherwise, the min-height property has no effect, if the content exceeds the minimum height.
Example 1: This example describes controlling the content overflow with the help of the CSS min-height property.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Fixing the text overflow in CSS
</title>
<style>
* {
margin: 0;
padding: 0;
}
.container {
width: 250px;
min-height: 200px;
border: 4px solid rgb(7, 240, 96);
color: rgb(31, 231, 31);
}
h1 {
color: green;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>
Fixing the text overflow in CSS
</h3><br />
<div class="container">
<p>
In this article, we'll see how to manage the
overflow issue in CSS. This type of problem
arrives when the content of the container
exceeds the container size, the container
contents will overflow. Here the content can
be text or image and the container can be a
div tag or some other HTML tag. This overflow
problem arrives only when the dimension of the
container is fixed. min-height properties set
the minimum height of the container and whenever
the content of the container required more space
then the height of the container also increases
with the size of the content.
</p>
</div>
</body>
</html>
|
Output:
By implementing CSS overflow-related properties: The overflowing of the content can be controlled & managed by implementing the required overflow property in CSS, which tells whether to clip the content or, to add scroll bars, or simply hide the extra content that is overflowed. To do this, CSS provides some properties, which are described below:
overflow: This CSS property handles the overflow problem in both vertical as well as horizontal without change in the dimension of the container. The overflow property has 4 values:
- hidden: It hides all the contents which overflow from the container.
changes after applying overflow: hidden
- scroll: it adds the scroll bar so the user can see all the content by scrolling.
overflow: scroll
- auto: It adds the scroll bar as needed for vertical or horizontal.
overflow: auto
- visible: visible is the default value of the overflow. so no change occurs after applying this property value.
overflow: visible
overflow-y: It is used to handle overflows of the content vertically. It also has 4 properties similar to overflow:
- visible: No change occurs after applying this property value.
overflow-y: visible
- hidden: It hides content that extends more than the container size vertically. But if the content overflows in the horizontal direction and you don’t define overflow-x, that creates a scroll bar in the horizontal direction.
overflow-y: hidden
- scroll: It adds a scroll bar vertically so the user can see the entire content by scrolling. But if you don’t define overflow-x and the content is overflowing horizontally, that creates a scroll bar in the horizontal direction.
overflow-y: scroll
- auto: It adds the slider if the content needs more space vertically.
overflow-y: auto
overflow-x: It is used to handle overflows of the content horizontally. Mostly it is used when we use the image in a container of fixed width and the width of the image exceeds the width of the container. Because the text is always laid out in the vertical direction when it excessed the width of the container. It also has 4 properties similar to overflow:
- hidden: It hides content that extends more than the container size horizontally.
overflow-x: hidden
- scroll: It adds a scroll bar horizontally so the user can see the entire content by scrolling.
overflow-x: scroll
- auto: It adds the slider if the content needs more space horizontally.
overflow-x: auto
- visible: No change occurs after applying this property value.
overflow-x: visible
For content underflow, there is no such definition is available in CSS that we can implement. Generally, the problem of this kind happens because of small mistakes.
Example 2: This example describes managing the overflowed content using the overflow property in CSS.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Fixing the text overflow using overflow Property
</title>
<style>
* {
margin: 0;
padding: 0;
}
.container {
width: 350px;
height: 200px;
border: 4px solid red;
overflow: auto;
/* hidden , auto , scroll , visible */
}
h1 {
color: green;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>
Fixing the text overflow using overflow Property
</h3>
<div class="container">
<p>
In this article, we'll see how to manage the
overflow issue in CSS. This type of problem
arrives when the content of the container
exceeds the container size, the container
contents will overflow. Here the content can
be text or image and the container can be a
div tag or some other HTML tag. This overflow
problem arrives only when the dimension of the
container is fixed. min-height properties set
the minimum height of the container and whenever
the content of the container required more space then
the height of the container also increases with the
size of the content.
</p>
</div>
</body>
</html>
|
Output:
Share your thoughts in the comments
Please Login to comment...