Я пытаюсь правильно измерить некоторые div с помощью flexbox, чтобы входы и другие элементы, которые я собираюсь добавить позже, имели правильные размеры, но независимо от того, что я делаю с div, вводразмер не меняется.
Что я могу сделать для ввода, чтобы он также изменился в соответствии с родительским div?
Ниже я разместил код, который у меня есть на данный момент, а такжес тем же кодом с явно небольшим вводом.Второй показывает зеленую область с правильными размерами с небольшими входами, в то время как на верхнем, входы растягивают родительский элемент и имеют одинаковый размер ...
Мне нужно сохранить размерыпомечен зеленым цветом вторым, и я хочу, чтобы входы соответствовали этому размеру ...
.flex-o-1 {flex: 1 1 auto;}
.flex-o-2 {flex: 2 2 auto;}
.flex-o-3 {flex: 3 3 auto;}
.flex-o-4 {flex: 4 4 auto;}
.flex-o-5 {flex: 5 5 auto;}
.GenInfo {display: flex;}
.GenInfo>div {
margin-left: 0.2em;
margin-right: 0.2em;
background-color: green;
height: 2em;
}
.GenInfo>div>input {max-width: 100%;} /* Also tried without this, nothing changes */
.SmallInput {max-width: 1em !important;} /* !important just for testing */
<div class="GenInfo">
<div class="flex-o-5">
<input type="text" />
</div>
<div class="flex-o-1">
<input type="text" />
</div>
<div class="flex-o-3">
<input type="text" />
</div>
<div class="flex-o-2">
<input type="text" />
</div>
<div class="flex-o-2">
<input type="text" />
</div>
<div class="flex-o-4">
<input type="text" />
</div>
</div>
<br>
<div class="GenInfo">
<div class="flex-o-5">
<input type="text" class="SmallInput" />
</div>
<div class="flex-o-1">
<input type="text" class="SmallInput" />
</div>
<div class="flex-o-3">
<input type="text" class="SmallInput" />
</div>
<div class="flex-o-2">
<input type="text" class="SmallInput" />
</div>
<div class="flex-o-2">
<input type="text" class="SmallInput" />
</div>
<div class="flex-o-4">
<input type="text" class="SmallInput" />
</div>
</div>