JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

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