最大高度无法弯曲溢出的孩子

Question

我有一个有2个孩子的元素。

我想要：

1. div根据其中一个孩子的需要增长
2. 另一个总是适合父母身高

因此，我想避免在父母身上设置身高。

当试图处理第二个孩子的溢出时会出现问题。

以下是代码：

.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>

如果我在.banner上设置一个固定的高度，一切都会成功，但我想尽可能避免这样做。

jsfiddle

谢谢。