CSS full page background height of scrollable div - css

Question

there is html code:
<div class="container content">
<div class="wrap-container row">
<div class="col-xs-12 col-md-5 text-center text-white left">
<h2 class="mt-5">Contact</h2>
<h1> 987 123 456</h1>
</div>
<div class="col-xs-12 col-md-6 ml-auto right">
<div class="form">
<form>
<!-- form controls -->
</form>
</div>
</div>
</div>
</div>
now in css
.content.container {
height: 80vh;
overflow: hidden;
box-sizing: border-box;
}
.wrap-container {
position: relative;
height: 80%;
border-radius: 5px;
background: rgba(0,0,0,.3);
overflow: hidden;
box-sizing: border-box;
}
.left {
text-shadow: 0px 1px 2px #808080, 2px 2px 1px rgba(47,171,81, 0.8);
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.right {
background: rgba(0,0,0,.8);
color: #b9b9b9;
margin: 2rem;
height: 86%;
overflow: hidden;
box-sizing: border-box;
}
.form {
overflow: auto;
height:99%;
padding-right: 3rem;
position: relative;
width: 110%;
left: 0;
right: -2rem;
}
#media (max-width: 768px) {
.content.container {
height: 200vh;
display: block;
}
.wrap-container {
display: block;
height: auto;
overflow: auto;
}
.cb-slideshow li div h3 {
line-height: 0;
}
.right, .left {
margin:0;
}
.right {
height: auto;
}
.form {
padding-right: 1.5rem;
/*height: auto;*/
display: block;
}
}
now, when .form div is getting higher than verticah height (100vh) content is cut. In small devices like phone I can scroll .form div content but only vh is visible, there is no visible submit button :/
I added in media query height 200vh of .content.container what solved problem but I think it's not proper way.
How should I extend scrollable div till its content height?

Answer 1

Children adapting to parents height is best resolved using flexbox.
I have set the wrap-container as flex and flex-direction:column as the children are stacked. I would try to avoid setting different heights to all children.
Then just add overflow-y:scroll to the form.
.wrap-container {
display: flex;
flex-direction: column;
}
.form {
overflow-y: scroll;
}
If you want to achive something like: 100vh for the main container and items in overflow:hidden but .form scrollable, for all devices, it should be done like this:
Fiddle