Высота гибкого контейнера неожиданно изменилась

Question

Я создаю список элементов и равномерно распределяю их по 4 на строку, используя гибкую рамку с направлением строки. Мне также нужен окружающий контейнер со столбцом направления гибкого направления, чтобы под ним было больше элементов. Проблема в том, что иногда я вижу, как высота флекс-бокса изменяется внутри, когда я использую свойство flex-based.

Я пробовал 4 разных варианта. Вот их описание, и правильно ли они себя ведут:

• Flex Basis с 2 вариантами (ведет себя некорректно)
• Flex Basis с 3 вариантами (ведет себя некорректно)
• Flex Basis с 4 вариантами (ведет себя правильно)
• Нет гибкой основы и только минимальная ширина (ведет себя правильно)

Вот CSS моих содержащихся div'ов в моем flexbox (4 на строку). По сути, .box2 работает правильно, тогда как .box1 ведет себя неожиданно. Также вот кодекс, чтобы проиллюстрировать проблему: https://codepen.io/anon/pen/zVWMqb

.container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

.boxes {
  display: flex;
  flex-wrap: wrap;
}

.box1 {
  flex-basis: 25%;
  min-width: 25%;
}

.box2 {
  min-width: 25%;
}

<h3>Flex basis with 2 options</h3>
<div class='container'>
  <div class='boxes'>
    <div class='box1'>Option 1</div>
    <div class='box1'>Option 2</div>
  </div>
  text below
</div>
<br/>
<h3>Flex basis with 3 options</h3>
<div class='container'>
  <div class='boxes'>
    <div class='box1'>Option 1</div>
    <div class='box1'>Option 2</div>
    <div class='box1'>Option 3</div>
  </div>
  text below
</div>
<br/>
<h3>Flex basis with 4 options</h3>
<div class='container'>
  <div class='boxes'>
    <div class='box1'>Option 1</div>
    <div class='box1'>Option 2</div>
    <div class='box1'>Option 3</div>
    <div class='box1'>Option 4</div>
  </div>
  text below
</div>
<br/>
<h3>Flex basis with 5 options</h3>
<div class='container'>
  <div class='boxes'>
    <div class='box1'>Option 1</div>
    <div class='box1'>Option 2</div>
    <div class='box1'>Option 3</div>
    <div class='box1'>Option 4</div>
    <div class='box1'>Option 5</div>
  </div>
  text below
</div>
<br/>
<h3>Without flex basis</h3>
<div class='container'>
  <div class='boxes'>
    <div class='box2'>Option 1</div>
    <div class='box2'>Option 2</div>
  </div>
  text below
</div>

Я ожидаю, что под списком опций не будет пробела, однако, в некоторых случаях, как показано в коде ручки. Я не ожидаю, что текст будет занимать больше места, чем высота строки, поэтому я запутался, откуда берется дополнительный пробел в некоторых ситуациях, но не в других.

Answer 1

Похоже, вы столкнулись с еще одной ошибкой, связанной с переносом столбцов во flexbox.

Если вы удалите flex-wrap: wrap из .container, макет будет работать так, как вы ожидаете. Похоже, это правило вам не нужно.

Также обратите внимание, что ошибка активна в Chrome и Firefox. Но ваш оригинальный код отлично работает в Edge.

Flex макет с column wrap имеет много ошибок. Возможно, это самая подверженная ошибкам область в flexbox на сегодняшний день. Вот еще два примера:

• При переносе элементов flexbox в режиме столбца его ширина не увеличивается
• Flexbox: неправильный расчет ширины при направлении Flex: столбец, Wrap-Wrap:

.container {
  display: flex;
  flex-direction: column;
  /* flex-wrap: wrap; */
}

.boxes {
  display: flex;
  flex-wrap: wrap;
}

.box1 {
  flex-basis: 25%;
  min-width: 25%;
}

.box2 {
  min-width: 25%;
}

<h3>Flex basis with 2 options</h3>
<div class='container'>
  <div class='boxes'>
    <div class='box1'>Option 1</div>
    <div class='box1'>Option 2</div>
  </div>
  text below
</div>
<br/>
<h3>Flex basis with 3 options</h3>
<div class='container'>
  <div class='boxes'>
    <div class='box1'>Option 1</div>
    <div class='box1'>Option 2</div>
    <div class='box1'>Option 3</div>
  </div>
  text below
</div>
<br/>
<h3>Flex basis with 4 options</h3>
<div class='container'>
  <div class='boxes'>
    <div class='box1'>Option 1</div>
    <div class='box1'>Option 2</div>
    <div class='box1'>Option 3</div>
    <div class='box1'>Option 4</div>
  </div>
  text below
</div>
<br/>
<h3>Without flex basis</h3>
<div class='container'>
  <div class='boxes'>
    <div class='box2'>Option 1</div>
    <div class='box2'>Option 2</div>
  </div>
  text below
</div>

Answer 2

На самом деле вы добавили свойство display flex для контейнера и ящиков. поэтому нет необходимости добавлять свойство display: flex и flex-wrap: wrap для контейнера, поскольку вы уже добавили в блоки div.

.boxes {
  display: flex;
  flex-wrap: wrap;
}

.box1 {
  flex-basis: 25%;
  min-width: 25%;
}

.box2 {
  min-width: 25%;
}

<h3>Flex basis with 2 options</h3>
<div class='container'>
  <div class='boxes'>
    <div class='box1'>Option 1</div>
    <div class='box1'>Option 2</div>
  </div>
  text below
</div>
<br/>
<h3>Flex basis with 3 options</h3>
<div class='container'>
  <div class='boxes'>
    <div class='box1'>Option 1</div>
    <div class='box1'>Option 2</div>
    <div class='box1'>Option 3</div>
  </div>
  text below
</div>
<br/>
<h3>Flex basis with 4 options</h3>
<div class='container'>
  <div class='boxes'>
    <div class='box1'>Option 1</div>
    <div class='box1'>Option 2</div>
    <div class='box1'>Option 3</div>
    <div class='box1'>Option 4</div>
  </div>
  text below
</div>
<br/>
<h3>Without flex basis</h3>
<div class='container'>
  <div class='boxes'>
    <div class='box2'>Option 1</div>
    <div class='box2'>Option 2</div>
  </div>
  text below
</div>