Child should take height of min-heigth-parent

Question

I got a flex wrapperdiv, two childs and a innerchild of the left child.

HTML

<div id="wrapper">
  <div id="left">
    <div id="inner-content">
    </div>
  </div>
  <div id="right">
  </div
</div> 

CSS

#wrapper {
  display: flex;
  width: 400px;
}

#left {
  background-color: red;
  width: 40%;
  min-height: 300px;
}

#inner-content {
  background-color: rgba(255,255,255, .6);
  height: 100%;
  overflow: auto;
}

#right {
  background-color: green;
  width: 60%;
}

The height of #left should always be at least 300px; if the content of #right grows beyond 300px, #left should be equal to #right.

The height of the #inner-content should always be max of #left (so either 300px or equal to #right). If the content is bigger, a scrollbar should appear.

At the moment, the #inner-content does not show a scrollbar, because parent #left does only have a min-width.

How can I give #left a dynamic height (dependent of #right), and still force #inner-content to take that height instead of it's content height? I also made a bin with current situation.

Answer 1

One way is to absolute position the inner-content element, like this, and by doing that, you overcome the issue when using percent for height, where it normally needs to be set on each parent all the way to the body (or first element with a fixed height value)

#wrapper {
  display: flex;
  width: 400px;
}
#left {
  position: relative;
  background-color: red;
  width: 40%;
  min-height: 300px;
}

#inner-content {
  position: absolute;
  left: 0; top: 0; right: 0; bottom: 0;
  background-color: rgba(255,255,255, .6);
  overflow: auto;
}

#right {
  background-color: green;
  width: 60%;
}

<div id="wrapper">
  <div id="left">
    <div id="inner-content">
      Content<br><br><br>
      Content<br><br><br>
      Content<br><br><br>
      Content<br><br><br>
      Content<br><br><br>
      Content<br><br><br>
      Content<br><br><br>
      Content<br><br><br>
      Content<br><br><br>
  </div>
  </div>
  <div id="right">
      Content<br><br><br>
      Content<br><br><br>
      Content<br><br><br>
      Content<br><br><br>
      Content<br><br><br>
      Content<br><br><br>
  </div>
</div>