I am currently working on the following HTML markup:
<div class="card" style="height:100%">
<div class="controlPanelContainer">
<div class="card" style="background-color:yellow;height:200px">
</div>
<div class="card"
style="background-color:blue;height:200px;min-height:100px;margin-
top:5px;overflow-y:auto;">
With Bootstrap, you get extensive and beautiful documentation for common
HTML elements, dozens of custom HTML and CSS components, and awesome
jQuery plugins. With Bootstrap, you get extensive and beautiful
documentation for common HTML elements, dozens of custom HTML and CSS
components, and awesome jQuery plugins.With Bootstrap, you get extensive
and beautiful documentation for common HTML elements, dozens of custom
HTML and CSS components, and awesome jQuery plugins.With Bootstrap, you
get extensive and beautiful documentation for common HTML elements,
dozens of custom HTML and CSS components, and awesome jQuery plugins.With
Bootstrap, ....
</div>
</div>
<div class="card-footer" style="height:40px">Footer
</div>
</div>
And in terms of styling, I have applied the following CSS:
.controlPanelContainer {
display: flex;
flex-flow: column;
}
If you want to check out a demo, here is the Fiddle link.
However, I am facing an issue where resizing the blue div vertically is not working as expected. It should resize until it reaches its min-height but that is not happening. Any suggestions or help would be greatly appreciated.
Thank you!