I am struggling with keeping the content inside a div from overflowing, despite using height: 50vh;. This div contains another div that has a background image and an overflow scroll while maintaining a specific aspect ratio.
Is it possible to resize the content inside the top div on browser resize while preserving the aspect ratio?
I would appreciate any guidance on how to achieve this. Thank you!
Here is what I have so far:
Codepen: https://codepen.io/anon/pen/LaLqNZ
body,
html {
padding: 0;
margin: 0;
}
#wrap {
width: 100vw;
height: 100vh;
display: inline-block;
margin: 0;
padding: 0;
}
#top {
width: 100vw;
height: 50vh;
display: inline-block;
background: blue;
padding: 20px;
box-sizing: border-box;
}
#bottom {
width: 100vw;
height: 50vh;
display: inline-block;
background: green;
}
<div id="wrap">
<div id="top">
<div class="one">
<div class="two">
<div class="three">
<div class="four"><img src="https://i.imgur.com/4yBw2n4.jpg"></div>
</div>
</div>
</div>
</div>
<div id="bottom">
<h1>Sample Text</h1>
</div>
</div>