Concepts
Flow layout and overflow
Flow layout and overflow
What is overflow?
<div class="box">
<p>
One November night in the year 1782, so the story runs, two brothers sat
over their winter fire in the little French town of Annonay, watching the
grey smoke-wreaths from the hearth curl up the wide chimney.
</p>
</div>
<p>
Their names were Stephen and Joseph Montgolfier. They were papermakers by
trade, and were noted as possessing thoughtful minds and a deep interest in
all scientific knowledge and new discovery.
</p>
<p>
Before that night—a memorable night, as it was to prove—hundreds of millions
of people had watched the rising smoke-wreaths of their fires without drawing
any special inspiration from the fact.
</p>Controlling overflow
body {
font: 1.2em / 1.5 sans-serif;
}
.box {
width: 300px;
height: 100px;
border: 5px solid rebeccapurple;
padding: 10px;
overflow: hidden;
}Using a value of scroll contains the content in its box and add scrollbars to enable viewing it. Scrollbars will be added even if the content fits in the box.
body {
font: 1.2em / 1.5 sans-serif;
}
.box {
width: 300px;
height: 100px;
border: 5px solid rebeccapurple;
padding: 10px;
overflow: scroll;
}Using a value of auto will display the content with no scrollbars if the content fits inside the box. If it doesn't fit then scrollbars will be added. Comparing the next example, you should see overflow: scroll example above has horizontal and vertical scrollbars even though it only needs vertical scrolling. The auto example below only adds the scrollbar in the direction we need to scroll.
body {
font: 1.2em / 1.5 sans-serif;
}
.box {
width: 300px;
height: 100px;
border: 5px solid rebeccapurple;
padding: 10px;
overflow: auto;
}