Рендеринг минимальной ширины по-разному в гибком направлении: строковое и гибкое направление: столбец

У меня есть контейнер с display: flex и flex-direction: row.

В этом контейнере есть суб-контейнер также с display: flex, но с flex-direction: column.

Проблема в том, что если я добавлю вход в суб-контейнер, min-width этого ввода будет проигнорирован.

Это код, в котором я пробовал несколько случаев ввода в flexbox:

form {
  margin: 100px;
}
div.flex_ctn {
  display: flex;
}
input {
  flex: 1;
  min-width: 40px;
}
div.column {
  flex-direction: column;
}
div.row {
  flex-direction: row;
}
div.sub_ctn {
  flex: 1;
  /*min-width:40px;*/
}
<form>
  <div class="flex_ctn row">
    <input />
  </div>
  <div class="flex_ctn column">
    <input />
  </div>
  <div class="flex_ctn row">
    <div class="flex_ctn column sub_ctn">
      <input />
    </div>
  </div>
  <div class="flex_ctn column">
    <div class="flex_ctn row sub_ctn">
      <input />
    </div>
  </div>
</form>

Ответы

Ответ 1

В общем случае элементы flex по умолчанию не могут быть меньше размера их содержимого.

В частности, это начальные настройки элементов flex:

  • min-width: auto (применяется в flex-direction: row)
  • min-height: auto (применяется в flex-direction: column)

Более конкретно, посмотрите на язык спецификации:

4.5. Подразумевается минимальный размер Flex Элементы

Чтобы обеспечить более разумный минимальный размер по умолчанию для гибких элементов, это спецификация вводит новое значение auto в качестве начального значения свойства min-width и min-height, определенные в CSS 2.1.

auto

В элементе flex, overflow которого есть visible на главной оси, когда указанный в элементе min-size основного элемента гибкого элемента, указывает автоматический минимальный размер. Он иначе вычисляет 0.

Иными словами, алгоритм минимального размера применяется только к главной оси.

Ваши входные элементы в контейнерах с колонками не получают min-width: auto – потому что главная ось вертикальна в этих случаях – поэтому они сжимаются и не будут переполнять контейнер. Вы можете увидеть, как это поведение воспроизводится на вашем втором входном элементе. Уменьшите размер экрана при просмотре .

То же самое происходит с третьим входом, который является дочерним элементом вложенного гибкого контейнера с flex-direction: column... EXCEPT, этот контейнер в виде столбца также является гибким элементом большего контейнера с flex-direction: row.

Это означает, что основная ось вложенного контейнера горизонтальна и применяется min-width: auto. В результате этот гибкий элемент не будет уменьшаться ниже внутренней ширины входа. Для иллюстрации см. Предыдущую версию .

Поэтому вам нужно переопределить это значение по умолчанию с помощью min-width: 0 или overflow: hidden (demo).

И по причинам, описанным выше, четвертый ввод, содержащийся во вложенном контейнере гибкости строки, также должен иметь переопределенный min-width: auto (демо).

Связано: Почему не сгибает элемент с уменьшением размера содержимого?