Show scrollbar in an absolutely-positioned modal window - html

Question

I've been trying to style an absolutely-positioned, reactive modal window that can pop up with a potentially large amount of content.
However, I can't seem to get the content part of the modal window to become vertically scroll-able. I've played around with all sorts of div layouts and overflow CSS settings, but can't figure out a way to get the result I need.
Specifically, I need ONLY the "modal-content" div of the modal window to be vertically scroll-able, and for the scrollbar NOT to extend up into the "modal-head" div. The modal-content div should also take up all available vertical space, while modal-head only takes up however much space is necessary for the title and button.
JSFiddle:
https://jsfiddle.net/xe7p5uzv/12/
HTML:
<div class="modal">
<div class="modal-head">
<h1>Modal Title</h1>
<button>Exit Modal Window</button>
</div>
<div class="modal-content">
Modal content here. Dapibus sagittis adipiscing at facilisis augue amet eleifend ipsum netus facilisi ullamcorper ligula tristique facilisi. Lacinia vestibulum a suspendisse a lorem mi vel erat condimentum consectetur enim elementum vehicula a porttitor lacus adipiscing sit potenti elementum adipiscing iaculis a vulputate at. Orci ullamcorper purus id sociis nibh mi sodales parturient enim a iaculis ridiculus a elementum consectetur primis scelerisque fusce vestibulum. Dictum dictumst tristique enim scelerisque libero consequat ornare nisl et ligula dignissim lorem vehicula nunc parturient. Praesent consequat nisi consectetur tempus et cras vestibulum a quisque nulla ullamcorper a suspendisse augue a suspendisse. Himenaeos mi ultricies mollis a vestibulum leo elit montes ad lobortis a malesuada leo eleifend. <br/><br/>
Suspendisse pretium scelerisque parturient nulla pharetra facilisi suspendisse orci sodales venenatis ipsum proin aenean nunc curabitur posuere curabitur netus dolor sociosqu lobortis pharetra adipiscing conubia. Mus sapien est leo cubilia parturient nunc lectus duis erat cubilia scelerisque praesent vulputate nam sodales eros congue condimentum ad a. Parturient consequat hac ad nisi natoque interdum eu convallis mi dignissim eu elementum tempor euismod congue sem ut adipiscing quis vestibulum a vitae ullamcorper tincidunt turpis parturient tellus suspendisse. Duis et mus nascetur parturient conubia in suscipit a dui malesuada nisi scelerisque sem mus vestibulum morbi. Commodo a elit porttitor a metus a mattis scelerisque porttitor ut tempus eros accumsan quis condimentum. Per consectetur etiam habitant enim ad massa ut condimentum urna iaculis conubia nisi et orci fames adipiscing lacinia in gravida dapibus dui. <br/>
</div>
</div>
<div>
Regular page content here. Malesuada ac nam curabitur ullamcorper dictumst varius neque a curae est a sed odio in eu ullamcorper aliquet faucibus dis turpis eros in laoreet malesuada sit non vitae. Dis orci iaculis mauris penatibus a fringilla in dis diam habitasse pharetra scelerisque vehicula netus. Eu non nascetur enim litora sem ad suscipit vel enim ad non consequat adipiscing ultrices senectus a a sodales tellus pretium. A fermentum ullamcorper a proin vestibulum suspendisse sed a purus a vestibulum a nostra condimentum consectetur. Fames at at nam a ultrices parturient adipiscing mus pretium consequat ornare ultrices ullamcorper condimentum vestibulum vestibulum a augue vestibulum sem urna laoreet fringilla inceptos.
</div>
CSS:
html {
font-size: 24px;
}
body {
margin: 0px;
padding: 12px;
}
.modal-bg {
z-index: 2;
width: 100vw;
height: 100vh;
background: rgba(0,0,0,0.8);
}
.modal {
z-index: 3;
position: absolute;
top: 48px;
right: 48px;
bottom: 48px;
left: 48px;
border: 4px solid red;
background-color: white;
overflow: hidden;
display: flex;
flex-wrap: wrap;
}
.modal-head {
background-color: grey;
width: 100%;
padding: 12px;
display: flex;
justify-content: space-between;
}
.modal-content {
width: 100%;
padding: 12px;
overflow-y: scroll;
}
Any ideas on how to accomplish this?

Answer 1

html {
font-size: 24px;
}
body {
margin: 0px;
padding: 12px;
}
h1{font-size: 14px}
.modal-bg {
z-index: 2;
width: 100vw;
height: 100vh;
background: rgba(0,0,0,0.8);
}
.modal {
z-index: 3;
position: absolute;
top: 48px;
right: 48px;
bottom: 48px;
left: 48px;
border: 4px solid red;
background-color: white;
display: flex;
flex-wrap: wrap;
overflow: hidden
}
.modal-head {
background-color: grey;
width: 100%;
padding: 12px;
display: flex;
justify-content: space-between;
}
.modal-content {
width: 100%;
padding: 12px;
overflow-y: scroll;
height: 100px
}
<div class="modal">
<div class="modal-head">
<h1>Modal Title</h1>
<button>Exit Modal Window</button>
</div>
<div class="modal-content">
Modal content here. Dapibus sagittis adipiscing at facilisis augue amet eleifend ipsum netus facilisi ullamcorper ligula tristique facilisi. Lacinia vestibulum a suspendisse a lorem mi vel erat condimentum consectetur enim elementum vehicula a porttitor lacus adipiscing sit potenti elementum adipiscing iaculis a vulputate at. Orci ullamcorper purus id sociis nibh mi sodales parturient enim a iaculis ridiculus a elementum consectetur primis scelerisque fusce vestibulum. Dictum dictumst tristique enim scelerisque libero consequat ornare nisl et ligula dignissim lorem vehicula nunc parturient. Praesent consequat nisi consectetur tempus et cras vestibulum a quisque nulla ullamcorper a suspendisse augue a suspendisse. Himenaeos mi ultricies mollis a vestibulum leo elit montes ad lobortis a malesuada leo eleifend. <br/><br/>
Suspendisse pretium scelerisque parturient nulla pharetra facilisi suspendisse orci sodales venenatis ipsum proin aenean nunc curabitur posuere curabitur netus dolor sociosqu lobortis pharetra adipiscing conubia. Mus sapien est leo cubilia parturient nunc lectus duis erat cubilia scelerisque praesent vulputate nam sodales eros congue condimentum ad a. Parturient consequat hac ad nisi natoque interdum eu convallis mi dignissim eu elementum tempor euismod congue sem ut adipiscing quis vestibulum a vitae ullamcorper tincidunt turpis parturient tellus suspendisse. Duis et mus nascetur parturient conubia in suscipit a dui malesuada nisi scelerisque sem mus vestibulum morbi. Commodo a elit porttitor a metus a mattis scelerisque porttitor ut tempus eros accumsan quis condimentum. Per consectetur etiam habitant enim ad massa ut condimentum urna iaculis conubia nisi et orci fames adipiscing lacinia in gravida dapibus dui. <br/>
</div>
</div>