limit flex height based on parent grid area - when flex-direction - css

Question

I am trying to do a flex-wrap with flex-direction column (see #design-content) placed in a grid area (see design-form).
#design-content needs to have the height of the grid area it is placed in.
This works as long as #design-form does NOT have flex-direction: column; but as soon as I add that line the element + the parent grid-template-row height changes (as shown in computed tab in chrome)
Is there a way to force #design content to respect height from the parent elements?
CSS
main {
height: 80vh;
display: grid;
grid-template-areas:
"ref"
"design";
grid-template-rows: fit-content(100%) 1fr;
}
#design-form {
grid-area: design;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr min-content;
grid-template-areas:
"form "
"controls";
gap: var(--standard-gap);
}
#design-content {
height: 100%;
display: flex;
min-height: 0;
flex-direction: column;
flex-wrap: wrap;
border-style: dotted dashed solid double;
gap: var(--standard-gap);
}
Relevant html
<main>
<form id="design-form" class="active">
<div id="design-content">
<div class="card">
<h4>setup</h4>
<div class="check-field-element">
<input
type="checkbox"
name="checkbox"
id="trophicMethod"}="">
<label>trophic method</label>
</div>
... more cards
</div>
</form>
</main>

Answer 1

To ensure that #design-content has a height of the parent grid area, you can set the height attribute to 100%, and then set the flex-direction property to row instead of column.This will cause the flex-wrap to wrap the content horizontally instead of vertically and will ensure that the height of the element is equal to the height of the parent grid area. Additionally, you can set the min-height property to 0 to ensure that the element will always have a height of at least 0. Here is the code with the changes applied:
#design-content {
height: 100%;
display: flex;
min-height: 0;
flex-direction: column;
flex-wrap: wrap;
flex-basis: 100%;
border-style: dotted dashed solid double;
gap: var(--standard-gap);
}