html - Fit a tall child into a shorter parent using flex -

i have 3rd party, scrollable, 100% height element (that don't want modify). fit inside parent div, fill space remaining.

i attempted using flex. (see code snippet). problem i've encounter because of content of 3rd part element, child div become taller parent. there way make flex shrink child fit remaining size of parent?

edit: if possible, avoid hard-coded numbers , let flex dynamically fit size tall_child fit remaining parent size.

.parent {    background-color : blue;    height : 50vh;    display : flex;    flex-direction: column;  }      .header {    background-color : red;    height : 50px;    width : 80%  }    .tall_child {    background-color : green;    width : 80%;      /*     want height of child determined automaticlly flex fit remaining space of parent     */  }    .scrollable_3rd_party_element {    height : 100%;    overflow : scroll;    border-style: solid;    border-width: 5px;  }

<div class="parent">    <div class="header">header</div>    <div class="tall_child">      <div class="scrollable_3rd_party_element">        <div>content</div>        <div>content</div>        <div>content</div>        <div>content</div>        <div>content</div>        <div>content</div>        <div>content</div>        <div>content</div>        <div>content</div>        <div>content</div>        <div>content</div>        <div>content</div>        <div>content</div>      </div>    </div>  </div>

add max-height:50px .scrollable_3rd_party_element

.parent {    background-color : blue;    height : 100px;    display : flex;    flex-direction: column;  }      .header {    background-color : red;    height : 50px;    width : 80%  }    .tall_child {    background-color : green;    width : 80%;      /*     want height of child determined automaticlly fit parent    height : 50px;     */  }    .scrollable_3rd_party_element {    height : 100%;    overflow : scroll;    border-style: solid;    border-width: 5px;    max-height: 50px  }

<div class="parent">    <div class="header">header</div>    <div class="tall_child">      <div class="scrollable_3rd_party_element">        <div>content</div>        <div>content</div>        <div>content</div>        <div>content</div>        <div>content</div>        <div>content</div>        <div>content</div>        <div>content</div>        <div>content</div>        <div>content</div>        <div>content</div>        <div>content</div>        <div>content</div>      </div>    </div>  </div>

for specific example parent size, 50px works. want works no matter parent size

then need use flex:1 , min-height: 0 in tall_child

i've noticed works on chrome not on safari under os-x.

bottom border truncated while in chrome looks perfect

a quick fix safari osx adding overflow-x:hidden in .tall_child , changing border .scrollable_3rd_party_element .tall_child

* {    box-sizing: border-box  }    .parent {    background-color: blue;    height: 100px;    display: flex;    flex-direction: column;  }    .header {    background-color: red;    height: 50px;    width: 80%  }    .tall_child {    background-color: green;    width: 80%;    flex: 1;    min-height: 0;    /* safari fix*/    overflow-x: hidden;    border: 5px solid  }    .scrollable_3rd_party_element {    height: 100%;    overflow-y: scroll;    }

<div class="parent">    <div class="header">header</div>    <div class="tall_child">      <div class="scrollable_3rd_party_element">        <div>content</div>        <div>content</div>        <div>content</div>        <div>content</div>        <div>content</div>        <div>content</div>        <div>content</div>        <div>content</div>        <div>content</div>        <div>content</div>        <div>content</div>        <div>content</div>        <div>content</div>      </div>    </div>  </div>