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

Question

我预计在此示例中，当屏幕宽度较小时，蓝色和红色框会换行，因为青色框设置为柔性换行。

但是，这没有发生。为什么这不起作用？

以下是代码：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

请参阅以下链接中的详细信息：http://codepen.io/anon/pen/vxExjL

Answer 1

这可能是column wrap弹性容器的错误。青色盒子拒绝缩小，这可以防止红色盒子缠绕。

您可以将宽度设置为第二列或.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