Минимальная ширина рендеринга по-разному в направлении Flex: строка и направление Flex: столбец

Question

У меня есть контейнер с 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>

https://fiddle.jshell.net/s3gu32ku/2/

Если вы уменьшите размер экрана, 3-я строка не будет реагировать, как другие.

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

Но это мешает мне использовать то, что я не понимаю ^^.

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

Answer 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

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

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

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

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

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

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

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

Связанный: почему не сгибает элемент, уменьшая размер контента?