Nested Flexbox: why are my last three buttons this width?

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?