минимальная ширина рендеринга по-разному в flex-direction: row и flex-direction: column
У меня есть контейнер с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/
Если вы уменьшите размер экрана, третья строка не будет реагировать, как другие.
В CSS вы увидите, что последняя строка установлена как комментарий. Когда эта часть включена, вам просто нужно перезагрузить, и проблема исчезнет. Настолько совершенен ! У меня есть решение!
Но это мешает мне использовать то, что я не понимаю ^^.
Было бы замечательно, если бы кто-то мог объяснить мне, почему возникает эта ошибка, почему эта строка исправляет ее, а также если есть лучший способ избежать этой проблемы.