Do not use flexbox for page layout. It invites nested flexboxes, which eats your reflow performance.
Use grid instead.
Use grid instead.
Therefore, to calculate the size of an item, the sizes of other items need to be known. Now, if one of the items is a flexbox, its item sizes cannot be known until the previous flexbox is laid out.
Of course, properly using flex-grow and flex-shrink can optimize that calculation, but what about deeper nested flexboxes?
The most important thing is to use the right tool for the job. If grid lets you express what you want in the most straightforward way, use it; if flexbox does - even if it needs nesting - then use it instead. Don't shoehorn one into a situation where the other makes more sense. And sometimes either will work for a particular situation and that's fine too; use whatever you find most ergonomic. They're both very good in their own way.