I have a form that acts as a flex container with many input fields. The fields have varying widths that flex grow and shrink to better display the inputs, wrapping as needed to maintain their min-width. This results in a responsive form with rows that increase or decrease depending on the size of the screen. However, this also results in 'dead-space' at the bottom of the form as the input fields are content-aligned to flex-start by the flex container. My goal is to have the textarea field height expand to fill the remaining space of the form flex container. I tried to just set align-self: stretch on the textarea field but nothing changed. Any assistance would be greatly appreciated.
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Flexbox Example</title><style> 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; }</style></head><body><form class="flex12"><label class="flex6">Input</label><label class="flex6">Input</label><label id="textarea" class="flex12">Textarea</label><label class="flex12">Button</label></form></body></html>