html - flex-wrap 在嵌套的 flex 容器中不起作用

Question

在这个例子中，当屏幕宽度较小时，我预计蓝色和红色框会换行，因为青色框设置为 flex-wrap。

然而，这并没有发生。为什么这不起作用？

代码如下:

.foo,
.foo1,
.foo3 {
  color: #333;
  text-align: center;
  padding: 1em;
  background: #ffea61;
  box-shadow: 0 0 0.5em #999;
  display: flex;
}

.foo1 {
  background: green;
  width: 200px;
  flex: 1 1 100%;
}

.foo2 {
  background: pink;
  display: flex;
  padding: 10px;
}

.foo3 {
  background: cyan;
  flex-wrap: wrap;
}

.bar1,
.bar2 {
  background: blue;
  width: 50px;
  height: 30px;
}

.bar2 {
  background: red;
}

.column {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  background: orange;
  height: 150px;
}

<div class="column">
  <div class="foo1"></div>
  <div class="foo">
    <div class="foo2">
      <div class="foo3">
        <div class="bar1"></div>
        <div class="bar2"></div>
      </div>
    </div>
  </div>
  <div class="foo1"></div>
</div>

详情请见以下链接:http://codepen.io/anon/pen/vxExjL

Answer 1

这可能是 column wrap flex 容器的错误。青色框拒绝收缩，从而阻止了红色框的换行。

您可以为第二列或 .foo2 或 .foo3 设置宽度，这将强制元素换行。但这可能不是您想要的。

一种解决方法是在这种情况下不使用column wrap。坚持 row nowrap:

.column {
  display: flex;
  background: orange;
  height: 150px;
}

.foo,
.foo1,
.foo3 {
  display: flex;
  justify-content: center;
  color: #333;
  text-align: center;
  padding: 1em;
  background: #ffea61;
  box-shadow: 0 0 0.5em #999;
}

.foo {
  flex: 1;
}

.foo1 {
  flex: 0 0 200px;
  background: green;
}

.foo2 {
  display: flex;
  background: pink;
  padding: 10px;
}

.foo3 {
  flex-wrap: wrap;
  margin: 0 auto;
  background: cyan;
}

.bar1,
.bar2 {
  background: blue;
  width: 50px;
  height: 30px;
}

.bar2 {
  background: red;
}

<div class="column">
  <div class="foo1"></div>
  <div class="foo">
    <div class="foo2">
      <div class="foo3">
        <div class="bar1"></div>
        <div class="bar2"></div>
      </div>
    </div>
  </div>
  <div class="foo1"></div>
</div>

revised codepen