Flow layout and overflow
When there is more content than can fit into a container, an overflow situation occurs. Understanding how overflow behaves is important in dealing with any element with a constrained size in CSS. This guide explains how overflow works when working with normal flow.The HTML is the same in each example, so it's visible in the first section, and hidden in others for brevity.
What is overflow?
Giving an element a fixed height and width, then adding significant content to the box, creates a basic overflow example:
<div> <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>body { font: 1.2em / 1.5 sans-serif;}.box { width: 300px; height: 100px; border: 5px solid rebeccapurple; padding: 10px;}The content goes into the box. Once it fills the box, it continues to overflow in a visible way, displaying content outside the box, potentially displaying under subsequent content. The property that controls how overflow behaves is theoverflow property which has an initial value ofvisible. This is why we can see the overflow content.
Controlling overflow
There are other values that control how overflow content behaves. To hide overflowing content use a value ofhidden. This may cause some of your content to not be visible.
<div> <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>body { font: 1.2em / 1.5 sans-serif;}.box { width: 300px; height: 100px; border: 5px solid rebeccapurple; padding: 10px; overflow: hidden;}Using a value ofscroll 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.
<div> <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 discoveries.</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>body { font: 1.2em / 1.5 sans-serif;}.box { width: 300px; height: 100px; border: 5px solid rebeccapurple; padding: 10px; overflow: scroll;}Using a value ofauto 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 seeoverflow: scroll example above has horizontal and vertical scrollbars even though it only needs vertical scrolling. Theauto example below only adds the scrollbar in the direction we need to scroll.
<div> <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>body { font: 1.2em / 1.5 sans-serif;}.box { width: 300px; height: 100px; border: 5px solid rebeccapurple; padding: 10px; overflow: auto;}As we have already learned, using any of these values, other than the default ofvisible, will create a newblock formatting context.
overflow: clip acts likeoverflow: hidden, but it does not allow programmatic scrolling; the box becomes non-scrollable. It also does not create a block formatting context.
The overflow property is in reality a shorthand for theoverflow-x andoverflow-y properties. If you specify only one value for overflow, this value is used for both axes. However, you can specify both values in which case the first is used foroverflow-x and therefore the horizontal direction, and the second foroverflow-y and the vertical direction. In the below example, I have only specifiedoverflow-y: scroll so we do not get the unwanted horizontal scrollbar.
<div> <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>body { font: 1.2em / 1.5 sans-serif;}.box { width: 300px; height: 100px; border: 5px solid rebeccapurple; padding: 10px; overflow-y: scroll;}Flow Relative Properties
In the guide toWriting Modes and Flow Layout, we looked at theblock-size andinline-size properties, which make more sense when working with different writing modes than tying our layout to the physical dimensions of the screen. TheCSS overflow module also includes flow relative properties for overflow -overflow-block andoverflow-inline. These correspond tooverflow-x andoverflow-y but the mapping depends on the writing mode of the document.
Indicating Overflow
In the CSS overflow module, there are some properties that can help improve the way content looks in an overflow situation.
Inline-Axis Overflow
Thetext-overflow property deals with text overflowing in the inline direction. It takes one of two valuesclip, in which case content is clipped when it overflows, this is the initial value and therefore the default behavior. We also haveellipsis which renders an ellipsis, which may be replaced with a better character for the language or writing mode in use.
<div> <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> <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></div>body { font: 1.2em / 1.5 sans-serif;}.box { width: 300px; border: 5px solid rebeccapurple; padding: 10px;}.box p { white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}Block-Axis Overflow
TheOverflow Module Level 4 specification adds ablock-ellipsis property (previously calledblock-overflow). This property enables adding an ellipsis (or custom strings) when text overflows in the block dimension, although there is no browser support for this at the time of writing.
This is useful in the situation where you have a listing of articles, for example, and you display the listings in fixed height boxes which only take a limited amount of text. It may not be obvious to the reader that there is more content to click through to when clicking the box or the title. An ellipsis indicates clearly the fact there is more content. The specification would allow a string of content or a regular ellipsis to be inserted.
Summary
Whether you are in continuous media on the web or in a Paged Media format such as print or EPUB, understanding how content overflows is useful when dealing with any layout method. By understanding how overflow works in normal flow, you should find it easier to understand the implications of overflow content in layout methods such as grid and flexbox.
See also
- Overflowing content guide
- CSS overflow module
- CSS containment module