Contents
What does it mean when content is overflowing?
Overflow happens when there is too much content to fit in a box. CSS provides various tools to manage overflow. As you go further with CSS layout and writing CSS, you will encounter more overflow situations.
Which is the default CSS for overflowing content?
To check your understanding, see Test your skills: overflow. This lesson introduced the concept of overflow. You should understand that default CSS avoids making overflowing content invisible.
Is there a way to crop content that is overflowing?
To crop content when it overflows, you can set overflow: hidden. This does exactly what it says: it hides overflow. Beware that this can make some content invisible. You should only do this if hiding content won’t cause problems. Instead, perhaps you would like to add scrollbars when content overflows?
What to do about overflowing content in legacy application?
In a legacy application, you may encounter a box where content is overlaying other content on the page. Now you can recognize that this happens with overflow. Ideally, you will refactor the layout to not rely on fixed-height containers. When developing a site, always keep overflow in mind.
Which is an example of an overflow in CSS?
As you go further with CSS layout and writing CSS, you will encounter more overflow situations. Let’s consider two examples that demonstrate the default behavior of CSS when there is overflow. The first example is a box that has been restricted by setting a height. Then we add content that exceeds the allocated space.
What happens when you change the value of overflow?
You should see the scrollbars disappear. When you use a value of overflow such as scroll or auto, you create a Block Formatting Context (BFC). The content of the box that you have changed the value of overflow for acquires a self-contained layout.
What to do when there is too much overflow?
For example, overflow: scroll hidden would set overflow-x to scroll and overflow-y to hidden. If you only want scrollbars to appear when there is more content than can fit in the box, use overflow: auto. This allows the browser to determine if it should display scrollbars. In the example below, remove content until it fits into the box.