Flex box isn't filling remaining space when using flex-grow 1

Question

I am trying to fill the remaining space of a containing flex box with the green div. I want the top flex row (blue) to only be the height of its contents and then the row below (green) to fill the rest. For some reason it just seems to split the flex rows evenly down the div. I have read a few questions on here already which all say to make sure the containing div has its height set to 100%. I have set the containing div height to 200px as this is my desired height, but I have also tried adding another container within this to 100% to no avail. I've also made sure to set the flex-grow property on the second row to 1. Every time I think I'm beginning to understand flex it throws another curve ball and it's driving me up the wall. Please help! Thank you.

P.S. for some reason the HTML code snippet below refuses to include the first line of my html but it is contained in 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>

Answer 1

how about to use flex-direction and below code what I used? green will fill ramaining space automatically, if you use its height's 100%

.container{
  display: flex;
  flex-direction: column;
  width: 200px;
  height: 300px;
  border: 1px solid black;
}

.blue{
  width: 100%;
  height: 90px; /*change only blue's height size, green will be filled automatically*/
  background: blue;
}

.green{
  width: 100%;
  height: 100%;
  background: green;
}

<div class="container">
  <div class="blue"></div>
  <div class="green"></div>
</div>