html - How to create wrapping with flexbox children

I want a grid to wrap when constrained by an outer node:

So the following should have two cells one on top of each other, but it renders them side by side:

    
foo
    
bar

How can I achieve my desired result?

Answer

Just add flex-wrap: wrap; (the second example below wraps, the first one not since the container's width is wide enough to accomodate both children in one line)

    
foo

    
bar



    
foo
    
bar