Почему «оправдать контент: reten» требует `flex-grow 'для расширения входных элементов ⇐ CSS

[Anonymous]

В следующем фрагменте, где я делаю форму ответа, где этикетки находятся выше на мобильном телефоне, а настольный компьютер - с настольным компьютером. Элементы с классом .field имеют оправдание-контент: streck , что должно заставить элементы расширить в доступное пространство.
Однако я обнаружил, что Элементы не расширяются. Я должен добавить гибкий рост: 1 к нему, чтобы его расширили, чтобы заполнить доступную ширину. > делает. Почему требуется гибкий рост < /код>. / * Распределить элементы равномерно
strect 'auto'-размеры элементов, чтобы соответствовать
контейнер * /< /p>
< /blockquote>
, и вы можете увидеть ниже Элементы .INPUT имеют ширину: Auto .
Обновление: я добавил элементы Div.not, не требующие ниже, чтобы показать, что ребенок-ребенок может Будьте гибким родителем, и это не имеет значения. Таким образом, я отделил два слоя гибких родителей. < /P>
позже в ссылке MDN. : strect не поддерживается гибкими коробками (Flexbox).

Таким образом Я думаю, а не Flexbox. < /P>

Код: Выделить всё

.container {
display: flex;
align-items: stretch;
flex-direction: column;
}

.label {
width: 100px;
}

.input {
width: auto;
flex-grow: 1;
}

.field {
display: flex;
justify-content: stretch;
flex-wrap: wrap;
}< /code>



Label 1





Label 2





Label 3

Подробнее здесь: https://stackoverflow.com/questions/736 ... elements-e