Issue
The concept of 'content overflow' seems to be something fundamental to Bootstrap 5.
In the Bootstrap layout documentation they talk about avoiding unwanted overflow. What exactly do they mean by an overflow? In that respect, what effect does .overflow-hidden have that avoids it?.
The accepted answer on another question on stack overflow mentions that "the navbar is sticking to the top when the content overflows". Again I do not understand what that means.
Thanks in advance.
Solution
In CSS, overflow is what the content and container looks like if the content is smaller or bigger than the containing element with defined dimension (width, height). There are different outputs you could choose from.
- visible - this is the default. The excess content is visible outside the container
- hidden - the excess content will be invisible
- scroll - scrollbar is added regardless of content
- auto - scrollbars will be added only when content gets large enough
Here's a fiddle: https://jsfiddle.net/21pvLk4d/1/
.container {
width: 10em;
height: 10em;
border: solid 1px black;
margin-bottom: 1em;
}
.overflow-auto{
overflow: auto;
}
.overflow-visible{
overflow: visible;
}
.overflow-hidden{
overflow: hidden;
}
.overflow-scroll{
overflow-y: scroll;
}
<h3>
Auto
</h3>
<div class="container overflow-auto">
Has scrollbar since the content is bigger than the container. <hr/>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
<div class="container overflow-auto">
No scrollbar since content is smaller than the container.
</div>
<h3>
Visible
</h3>
<div class="container overflow-visible">
Text visible outside the box! <hr/>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
</div>
<h3>
Hidden
</h3>
<div class="container overflow-hidden">
This one hides the excess content. <hr/>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
<h3>
Scroll
</h3>
<div class="container overflow-scroll">
Even though the content is smaller, the scrollbar is visible.
</div>
Answered By - dpp
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.