flex-wrap not working in nested flex container

Question

I expected the blue and red box to wrap when the screen width is small in this example, because the cyan box is set to flex-wrap.

However, that's not happening. Why is this not working?

Here is the code:

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

Please see the details in the following link: http://codepen.io/anon/pen/vxExjL

Michael Benjamin · Accepted Answer · 2017-02-25T13:42:20.600

1

This may be a bug with a column wrap flex container. The cyan box is refusing to shrink, which prevents the red box from wrapping.

You could set a width to the second column or .foo2 or .foo3, and that will force the items to wrap. But that's probably not what you want.

One workaround is to not use column wrap in this case. Stick to 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

edited Feb 25 '17 at 13:42

answered Feb 25 '17 at 13:26

Michael Benjamin

346,931
104
581
701

1

Thanks for your answer! This works. I accepted this as the correct answer. My actual problem is more complicated than this and require me to use flex-dir: column. So the flex-dir:row solution wouldn't work in my case. But this is a good answer! Thanks! – louis.luo Feb 26 '17 at 04:04
@louis.luo, just an FYI, in case you're not already aware: There are several flexbox problems that are unique to `column wrap`. I personally don't think `column wrap` is ready for prime time. That's one reason I normally stick to `row`-based layouts. – Michael Benjamin Feb 26 '17 at 04:27
1

For more details see: [**here**](http://stackoverflow.com/questions/33891709/when-flexbox-items-wrap-in-column-mode-container-does-not-grow-its-width), [**here**](http://stackoverflow.com/questions/39095473/flexbox-wrong-width-calculation-when-flex-direction-column-flex-wrap-wrap), [**here**](http://stackoverflow.com/questions/39617628/height-of-flex-container-not-working-properly-in-safari) and [**here**](http://stackoverflow.com/questions/34480760/is-it-possible-for-the-items-in-a-flexbox-container-that-wraps-in-rows-to-align). – Michael Benjamin Feb 26 '17 at 04:28

flex-wrap not working in nested flex container

1 Answers1

Linked