I am struggling to make the green div fill the remaining space of a flex box container. My goal is to have the top row (blue) adjust its height based on content, and then have the row below (green) take up the rest of the space. However, it seems like the flex rows are splitting evenly down the container instead. I've tried setting the containing div's height to 200px, as well as adding another container with a height set to 100%, but nothing seems to work. I've also made sure to use the flex-grow property on the second row. Flexbox can be quite confusing at times - any assistance would be greatly appreciated! Thank you.
P.S. The HTML code snippet below doesn't show the first line of my HTML, which should be contained within the following div:
<div class="rmCtrlList_item".rmCtrlList_item {
width: 80vw;
margin: 3vw 8.5vw;
height: 200px;
background-color: $primary-color;
border-radius: 10px;
padding: 5px;
display: flex;
flex-flow: row;
flex-wrap: wrap;
// ROWS
&_row {
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
#row-1 {
//max-height: 20px;
background-color: blue;
}
#row-2 {
flex-grow: 1;
align-items: center;
justify-content: center;
background-color: green;
}
// COLUMNS
&_col {
text-align: left;
flex-direction: column;
}
#col-1b {
flex-grow: 1;
}
}<div class="rmCtrlList_item">
<div class="rmCtrlList_item_row" id="row-1">
<div class="rmCtrlList_item_col" id="col-1a">
<a href="lights.html"><i class="icon__panel-2 fas fa-lightbulb"></i></a>
</div>
<div class="rmCtrlList_item_col" id="col-1b">
<a href="lights.html">
<h1 class="panel__title">Lights</h1>
</a>
</div>
<div class="rmCtrlList_item_col" id="col-1c">
<a href="lights.html"><i class="icon__enlarge fas fa-plus-circle"></i></a>
</div>
</div>
<div class="rmCtrlList_item_row" id="row-2">
div to fill remaining space
</div>
</div>