Overflow in learn the box model lesson


#1

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.


#2

#3