为什么嵌套的 flexbox 没有增长到全宽？

Question

Consider the following HTML/CSS:

 <div style="display: flex; background-color: yellow;"> <div style="display: flex;background-color: lightblue;">i am a NESTED flexbox</div> </div>

This ends up as

Note how the nested flexbox (lightblue background color) does not fill the complete width, while the outer flexbox (yellow background) does.

Why doesn't a nested flexbox container grow to the full width of the parent?

Hint : I know I can fix it with flex: 1 , but the question is about understanding why it behaves like this, not how to fix it

Answer 1

The lightblue div is actually a flex item . The default properties of flex items are:

flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;

So the item won't grow to fill the remaining space, it would shrink, and look at my width or height property for basis.

Answer 2

Your nested div-block (lightblue background color) only takes up the space (width) it needs. You can see this by doubling the text of the nested block.

It's a matter of default behavior and context formatting:

• https://www.w3.org/TR/CSS22/visuren.html#block-formatting
• https://www.w3.org/TR/css-flexbox-1/#flex-containers

If you want it to take the full width then you have the choice to add width: 100%; or flex:1 in the CSS of the nested div.