Overflow in learn the box model lesson

Question

In the introduction lesson, says to see how some of the properties affect the elements, and overflow is one of them, but what is Overflow?

Answer
Every element is a box, most often rectangular. But when one element becomes a container, i.e. it contains other elements inside it like a paragraph tag inside a div:


<div>

  <p> Here’s some text </p>

</div>

Then the container (also called parent element) might not always be large enough for the content and then we will need to decide how can we fix that issue. The overflow property helps us with that. It controls what happens to the content when, because of its size in relation to the parent element, it breaks the bounds.

The overflow property has three main values, the default is visible which will allow us to see the container inside of the parent element (also called child) spill over or overflow from the container, the second value is hidden which will hide the part of the child element that would not fit inside the parent, and the third is scroll, which will allow us to have the overflowing text hidden, and it will give us a scroll bar to be able to see it.

25 Likes

Is the word “container” in front of “inside of” a typo and was actually meant to be “content”?

4 Likes

Beautiful explanation, thanks.

1 Like

oh i get it! but why would we want the overflow to be just hidden? It seems to me that scroll is the best option

The best option is the one that suits the design constraints. There is no fixed best option in the real sense, that’s why HTML/CSS is so flexible.

4 Likes

It is a typo for sure.

like zhangyil - I can’t think of a situation where one would want overflowing content to be not seen (hidden).Could you give an example of that?

1 Like

There are other property you can add that when it is going to be hidden, u add… for instance so that the user knows there are more stuff