I have a scrollbar-equipped third-party element with 100% height (which I'd prefer not to alter). My goal is to place it within a parent container so that it occupies all available space.
I attempted this using Flexbox (see code snippet). The issue I faced was that due to the content of the third-party element, the child div ended up taller than its parent. Is there a way for Flexbox to automatically adjust the child's height to fit the remaining space of the parent?
UPDATE: Ideally, I'd like to steer clear of hard-coded measurements and rely on Flexbox to dynamically adjust the sizing so that the tall_child perfectly fills the leftover space in the parent container.
.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%;
/*
I want the height of the this child to be determined automaticlly by flex to 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>