Flex div с flex-wrap не переносится

Question

Я пытаюсь получить несколько div для извлечения всей ширины и переноса, если их индивидуальная ширина меньше 200 пикселей.Вот что я сделал:

.box {
  width: 1100px;
  max-width: 100%;
  display: flex;
  box-sizing: border-box;
  flex-flow: row;
  flex-wrap: wrap;
}

.box>div {
  border: 1px solid #aaa;
  min-width: 200px;
  box-sizing: border-box;
  flex-grow: 1;
}

<div class="box">

  <div>
    Boite 1
  </div>
  <div>
    Boite 2
  </div>
  <div>
    Boite 3
  </div>

</div>

Но это не перенос.В чем проблема?

Answer 1

В контейнере шириной 100% / 1100px у вас есть три дочерних элемента flex по 200px min-width - они не будут переноситься, пока общая ширина не меньше 600px.

сделайте окно более узким или добавьте дополнительные дочерние элементы, тогда вы увидите обтекание

.box {
  width: 1100px;
  max-width: 100%;
  display: flex;
  box-sizing: border-box;
  flex-flow: row;
  flex-wrap: wrap;
}

.box > div {
  border: 1px solid #aaa;
  min-width: 200px;
  box-sizing: border-box;
  flex-grow: 1;
}

<div class="box">

  <div>
    Boite 1
  </div>
  <div>
    Boite 2
  </div>
  <div>
    Boite 3
  </div>
  <div>
    Boite 4
  </div>
  <div>
    Boite 5
  </div>
  <div>
    Boite 6
  </div>

</div>

Answer 2

Элементы div будут перенесены, если в контейнере больше нет места.Ваш контейнер имеет width: 1100px;, поэтому он может содержать несколько дочерних элементов шириной min-width: 200px;.

Если вы добавите больше дочерних элементов в ваш контейнер, они будут перенесены.