What exactly is meant by "overflow" in CSS?-CodePudding

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.

CodePudding user response：

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 >
  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 >
  No scrollbar since content is smaller than the container.
</div>
<h3>
Visible
</h3>
<div >
  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 >
  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 >
  Even though the content is smaller, the scrollbar is visible.
</div>