Max Height not working on flexing child with overflow

Question

I have an element with 2 children.

I'm trying to have:

1. div grow as much as it needs based on 1 of its children
2. the other always fit the parents height

Thus, I want to avoid setting a height on the parent.

The problem arises when trying to handle overflow of the second child.

Here's the code:

.banner {
  display: flex;
  background-color: lightblue;
  overflow: auto;
  border: 4px solid black;
  //max-height: 120px; // 1) IF I'M NOT SET THE SCROLL WON'T WORK

}
.constant {
  color: white;
  flex: 0 0 auto;
  width: 200px;
  // height: 150px; 2) DISABLED FOR NOW
  border: 4px solid yellow;
  background-color: olive;
  border: 2px solid red;
}
.container {
  display: flex;
  text-align: center;
}
.main {
  max-height: 100%; // 3) I SHOULD STOP MYSELF FROM GROWING MORE THAN MY PARENT
  flex: 1;
  overflow-y: scroll;
  border: 2px solid white;
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-end;
  flex-wrap: wrap;
}
.main div {
  text-align: center;
  width: 200px;
  height: 80px;
}
.main-side {
  flex: 0 0 auto;
  color: white;
  background-color: grey;
  border: 2px solid yellow;
}
html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
  background-repeat: no-repeat !important;
  min-width: 0px;
  min-height: 0px;
}

<div class="banner">
  <div class="container">
    <div class="main">
      <div style="background-color:coral;">A</div>
      <div style="background-color:lightgoldenrodyellow;">B</div>
      <div style="background-color:khaki;">C</div>
      <div style="background-color:pink;">D</div>
      <div style="background-color:lightgrey;">E</div>
      <div style="background-color:lightgreen;">F</div>
    </div>
    <div class="main-side">I've a fixed size</div>
  </div>
  <div class="constant">I can grow...and my parent should grow if I grow</div>
</div>

If I set a fixed height on .banner everything works out, but I would like to avoid doing so if possible.

jsfiddle

Thank you.