Flexbox: неправильный расчет ширины при гибком направлении: столбец, flex-wrap: wrap

У меня возникла проблема при использовании flexbox.

Я использую контейнер с flex-direction: column; flex-wrap: wrap, поэтому мои внутренние элементы могут быть помещены в несколько столбцов.

Проблема заключается в том, что браузер по-прежнему вычисляет ширину контейнера как сумму внутренних элементов ширины!

Мой контейнерный блок должен иметь меньшую ширину (в зависимости от размера содержимого), но на самом деле он огромен.

В любом случае, очень неестественно вычислять ширину контейнера при использовании столбцов, а не строк.

Взгляните на зеленый блок в моем коде. У этого есть огромный, но он не должен иметь так. Кроме того, он становится меньше при удалении элемента из контейнера.

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

Проверено это на последних версиях Safari и Chrome на последней версии ОС.

JSFiddle

.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  background: #aa0000;
  height: 100px;
}
.group {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-content: flex-start;
}
.g1 {
  background: #00aa00;
}
.g2 {
  background: #0000aa;
}

<div class="container">
  <div class="group g1">
    <div class="item">Item</div>
    <div class="item">Item</div>
    <div class="item">Item</div>
    <div class="item">Item</div>
    <div class="item">Item</div>
    <div class="item">Item</div>
    <div class="item">Item</div>
  </div>
  <div class="group g2">
    <div class="item">Item</div>
  </div>
</div>

Ответы

Ответ 1

Это, по-видимому, еще одна ошибка в Flex Lay Box Module, включающая flex-direction: column и flex-wrap: wrap.

Браузеры, кажется, повсюду в этом вопросе.

В этом конкретном случае, как указано в сообщении :

Мне кажется, что ширина вычисляется так, как если бы внутренние элементы были расположены горизонтально (flex-direction: row) вместо вертикали.

В других случаях происходит обратное:

Когда flexbox элементы переносятся в режиме столбцов, контейнер не увеличивает свою ширину

В обоих случаях в настоящее время нет гибких методов для решения проблемы.

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

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

То есть вместо использования flex-direction: column; используйте flex-direction: row; writing-mode: vertical-lr;. Помните resetдо writing-mode: initial; в дочерних элементах flexbox.

_{https://bugs.chromium.org/p/chromium/issues/detail?id=507397}

Отчеты об ошибках:

Ответ 2

У вас нет предварительно заданной ширины, чтобы он зарегистрировал его как поле ширины 50%. Как правило, вы задали ширину в группе g1, а затем flex: 1; в группе g2

Ответ 3

хорошо. две группы имеют ширину 50% (половина) своего родительского .container, который по умолчанию имеет width:100% тела. поэтому, если вы хотите, чтобы ваши столбцы были меньше, либо уменьшите размер .container, либо уменьшите одну группу, например .g1 width :30%

см. оба примера ниже:

.g1 меньше

.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  background: #aa0000;
  height: 100px;
  
}

.group {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-content: flex-start;

}

.g1 {
  background: #00aa00;
    width:30%;
}

.g2 {
  background: #0000aa;
  /*flex:1; could also use this*/
}

<div class="container">
    <div class="group g1">
      <div class="item">Item</div>
      <div class="item">Item</div>
      <div class="item">Item</div>
      <div class="item">Item</div>
      <div class="item">Item</div>
      <div class="item">Item</div>
      <div class="item">Item</div>
    </div>
    <div class="group g2">
      <div class="item">Item</div>
    </div>
</div>