flex-flow: обертка столбцов в гибкой коробке, вызывающая переполнение родительского контейнера

У меня такой сценарий:

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; } 
 

При использовании .section.vert элементы .box переполняют этот раздел.

Есть ли что-нибудь, что я могу сделать, чтобы предотвратить установку ширины элемента .section.vert ?

Измените flex-wrap на nowrap

 .section.vert{ flex-direction:column; flex-wrap: nowrap; outline: 3px dashed green; } 

скрипка

отрывок

 .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: nowrap; outline: 3px dashed green; } .box{ border:solid thin red; width:1em; height:1em; }