Иметь изгиб элемент/строки оставшаяся высота контейнера, когда контейнер с гибкой выравнивает содержимое с Flex-Start ⇐ CSS

[Anonymous]

У меня есть форма, которая действует как гибкий контейнер со многими полями ввода. Поля имеют различную ширину, которая растут и сокращается, чтобы лучше отображать входы, обертывание по мере необходимости для поддержания их ширины. Это приводит к отзывчивой форме с рядами, которые увеличиваются или уменьшаются в зависимости от размера экрана. Тем не менее, это также приводит к «мертвому пространству» в нижней части формы, поскольку входные поля выравниваются с контентом с гибким контейнером. Моя цель - расширить высоту поля Textarea, чтобы заполнить оставшееся пространство изгибного контейнера. Я попытался просто установить выравнивание: протянуть на поле Textarea, но ничего не изменилось. Любая помощь была бы очень оценена.

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

Flexbox Example

body {
margin: 0;
width: 100vw;
height: 640px;
display: flex;
}

form {
display: flex;
flex-wrap: wrap;
align-content: flex-start;
justify-content: space-between;
gap: 10px;
background-color: lightyellow;
height: 90%;
}

.flex12 {
flex: 1 1 99%;
min-width: 90%;
}

.flex6 {
flex: 1 1 49%;
min-width: 40%;
}

label {
background-color: lightblue;
text-align: left;
line-height: 40px;
font-weight: bold;
align-self: unset;
}

#textarea {
align-self: stretch;
background-color: lightcoral;
}




Input
Input
Textarea
Button

Подробнее здесь: https://stackoverflow.com/questions/796 ... -aligns-co