html - Understanding the behavior of overflow: hidden in a flexbox container -

i've been having few issues flex boxes , having them span out of container text/content grows, , applying ellipses when specified max-width of container reached.

this isn't ideal because parent container can shrink x pixels , text forces grow max-width not want.

looking @ this fiddle, if remove overflow: hidden child1 , apply main, text cut off.

if remove overflow: hidden main , apply child1, behaviour want achieved.

if remove overflow: hidden both of them, container , text go on forever.

i want know why applying overflow: hidden child1 produces desired behaviour. shouldn't text cut off did 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>

when apply overflow: hidden .main, clips .child1 but not .child2 (the div text).

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

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

when use overflow: hidden on .child1, clips .child2.

now width of .child2 limited, , ellipsis works intended (demo).

again, can illustrated more overflow: scroll on .main.

also keep in mind, overflow property applies content of block container.

from spec:

11.1.1 overflow: overflow property

this property specifies whether content of block container element clipped when overflows element's box. affects clipping of of element's content except descendant elements (and respective content , descendants) containing block viewport or ancestor of element.