I am trying to understand how Flexbox works when we nest them.button {font-size: 24px;height: 30px;width: 100%;}
<div style= {{ display:'flex', flexDirection: "row"}}><button /><button /><div style= {{ display:'flex', flexGrow: 1, flexDirection: "row"}}><button /><button /><button /></div></div>This is a linear left to right layout of: button, button, div
And within the div there's three buttons.
Can someone explain what's determining the width of the last three buttons? Width:100% is specified, but it's relative to the internal flexbox container (2nd div). How is the size of this 2nd flexbox now determined?
