Can't add flex-grow for column flex box with min-height

I am trying to design a website layout that uses the power of flex box in order to fill the entire page with content even when the content does not fill the entire length of the page.

I have created a big flex-box container with flex-direction: column;. When I set the last child's to have flex-grow: 1; and all of the rest of the childrens have flex-grow: unset; something breaks and the flex-grow property does not affect the content of the children when I am using min-height

refer to the following example on JSFiddle.

The .should-strech class represents the content of one of the childrens that should fill the entire children's height. When I am using height: 100px everything works well (See the first box, the yellow area fills the entire space).

When I am using min-height: 100px; The yellow area does not fills the entire height anymore.

I tried using another flex box inside the child but it is not a best practice for my situation becuase this is a generic component that the number of "contents" in a children is unknown or dynamic.

 <div class="container height">
  <div class="child">
    1
  </div>
  <div class="child">
    <div class="should-strech">
      2
    </div>
  </div>
</div>
<br/>
<div class="container min-height">
  <div class="child">
    1
  </div>
  <div class="child">
    <div class="should-strech">
      2
    </div>
  </div>
</div>

.min-height {
   min-height: 100px;
}

.height {
   height: 100px;
}

.container {
  width: 100px;
  display: flex;
  flex-direction: column;
  background-color: aqua;
}

.child {
  background-color: red;
}

.child:last-child {
  background-color: green;
  flex-grow: 1;
}

.should-strech {
  background-color: yellow;
  height: 100%;
}

Try a nested flexbox like below:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.min-height {
   min-height: 100px;
}

.height {
   height: 100px;
}

.container {
  width: 100px;
  display: flex;
  flex-direction: column;
  background-color: aqua;
}

.child {
  background-color: red;
  display: flex;
  flex-direction: column;
}

.child:last-child {
  background-color: green;
  flex-grow: 1;
}

.should-strech {
  background-color: yellow;
  flex-grow: 1;
}

<!-- language: lang-html -->

<div class="container height">
  <div class="child">
    1
  </div>
  <div class="child">
    <div class="should-strech">
      2
    </div>
  </div>
</div>
<br/>
<div class="container min-height">
  <div class="child">
    1
  </div>
  <div class="child">
    <div class="should-strech">
      2
    </div>
  </div>
</div>

<!-- end snippet -->