html - flex box 中的 flex-flow : column wrap, 导致父容器溢出

Question

我有这种情况:

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>

当使用 .section.vert 时，.box 元素会溢出该部分。

我能做些什么来避免必须在 .section.vert 元素上设置宽度吗？

Answer 1

将 flex-wrap 更改为 nowrap

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

}

Fiddle

片段

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

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