html - Max Height not working on flexing child with overflow -

i have element 2 children.

i'm trying have:

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

thus, want avoid setting height on parent.

the problem arises when trying handle overflow of second child.

here's code:

.banner {    display: flex;    background-color: lightblue;    overflow: auto;    border: 4px solid black;    //max-height: 120px; // 1) if i'm not set scroll won't work    }  .constant {    color: white;    flex: 0 0 auto;    width: 200px;    // height: 150px; 2) disabled    border: 4px solid yellow;    background-color: olive;    border: 2px solid red;  }  .container {    display: flex;    text-align: center;  }  .main {    max-height: 100%; // 3) should stop myself growing more 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 fixed size</div>    </div>    <div class="constant">i can grow...and parent should grow if grow</div>  </div>

if set fixed height on .banner works out, avoid doing if possible.

jsfiddle

thank you.