I have this scenario:
https://jsfiddle.net/b6zcdgf7/
.container{ display:flex; height:3em; border:solid thin blue;}.section{ border:solid thin gray; display:flex;}.section.horiz{}.section.vert{ flex-direction:column; flex-wrap: wrap;}.box{ border:solid thin red; width:1em; height:1em;}<div class="container"><div class="section horiz"><div class="box"></div><div class="box"></div></div><div class="section horiz"><div class="box"></div><div class="box"></div></div><div class="section horiz"><div class="box"></div></div><div class="section vert"><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div></div></div>When using .section.vert the .box elements overflow the section.
Is there anything i can do to prevent having to set a width on the .section.vert element?