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