Initially, here are my code snippets:
In the HTML file:
<div class="div parent">
Title
<div class="div child">
<div class="overflowed">
</div>
</div>
</div>
CSS Styling:
.div {
border: 1px solid #000000;
padding: 10px;
overflow: auto;
}
.parent {
max-height: 100px;
}
.overflowed {
min-height: 150px;
}
I'm not very skilled at explaining webpage layouts, so if I've described something inaccurately, please let me know, thank you :)
Is there a way to make the child div display similar to this example, with its bottom border always maintaining a margin from the parent's bottom border?
Also, the "Title" element in line 2 of the HTML will adjust its height based on different screen resolutions, so it cannot be restricted by the max-height property.
Check out the jsFiddle demo here: https://jsfiddle.net/dj3ydshf/