I'm attempting to divide the viewport's height between two divs. In the top div, there is a small div followed by a larger div that should scroll if it doesn't fit within the remaining space of the parent div. Below is the structure of my HTML and CSS (a more detailed example with additional content in the divs can be found in the linked JSFiddle).
<body>
<div class="half-col" style="background: lightgreen;">
<div style="border:solid 1px;">
<span>Small amount of stuff</span>
</div>
<div class="y-scroll" style="border:solid 1px;">
<span>Large amount of stuff ...</span>
</div>
</div>
<div class="half-col" style="background: blue;"> </div>
</body>
The following CSS styles are being used:
div.half-col {
height: 50vh;
}
div.y-scroll {
overflow: auto;
height: inherit;
}
Setting height: inherit restricts the height of the second sub-div (containing "Large Amount of Stuff") to the total height of the lightgreen parent div. This results in scrolling since there still isn't enough space available, even in the jsfiddle. However, ideally, I'd like to limit the height of that div to the remaining space in the parent div after accounting for the divs above it. (In my actual scenario, there are multiple divs above it, each requiring minimal vertical space that won't exceed the parent's boundaries.) What's the correct approach to confining a div's height to the leftover space within its parent?
JSFiddle: https://jsfiddle.net/pj056n0n/3/
(this is my first time using JSFiddle -- apologies if I made any errors)