Question Mcquestioner Question Mcquestioner - 4 months ago 38
HTML Question

Understanding the behavior of overflow: hidden in a flexbox container

I've been having a few issues with flex boxes and having them span out of their container as the text/content grows, and only applying ellipses when a specified max-width of the container is reached.

This isn't ideal because the parent container can shrink to x pixels and the text just forces it to grow to the max-width which I do not want.

Looking at this fiddle,
if I remove

overflow: hidden
from
child1
and apply it to
main
, the text will just be cut off.

If I remove
overflow: hidden
from
main
and apply it to
child1
, the behaviour I want is achieved.

If I remove
overflow: hidden
from both of them, the container and text just go on forever.

I just want to know why applying
overflow: hidden
to
child1
produces the desired behaviour. Shouldn't the text just cut off as it did with overflow on
main
?




.main {
display: flex;
border: 1px solid black;
height: 200px;
padding: 10px;
//overflow: hidden;

}
.child1 {
display: flex;
border: 1px solid red;
height: 100px;
overflow: hidden;
}
.child2 {
flex: 1 1 auto;
text-align: center;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}

<div class="main">
<div class="child1">
<div class="child2">
Lots of words Lots of wordsLots of wordsLots of wordsLots of wordsLots of wordsLots of wordsLots of wordsLots of wordsLots of wordsLots of wordsLots of wordsLots of wordsLots of wordsLots of wordsLots of wordsLots of wordsLots of
</div>
</div>
</div>




Answer

When you apply overflow: hidden to .main, this clips .child1 but not .child2 (the div with text).

So .child2 overflows .main because there is no overflow: hidden on .child1 (demo).

To understand this better, try overflow: scroll on .main instead of hidden.

When you use overflow: hidden on .child1, this clips .child2.

Now the width of .child2 is limited, and ellipsis works as intended (demo).

Again, this can be illustrated more clearly with overflow: scroll on .main.

Also keep in mind, the overflow property applies only to content of a block container.

From the spec:

11.1.1 Overflow: the overflow property

This property specifies whether content of a block container element is clipped when it overflows the element's box. It affects the clipping of all of the element's content except any descendant elements (and their respective content and descendants) whose containing block is the viewport or an ancestor of the element.

Comments