I am attempting to create a div that is based on percentages, and I want to nest a div inside another. Specifically, I want the center (xyz div) to only take up 90% of the height of the content-div.
My goal is for the "content" div to be responsive to 90% of the height of the center div, positioned between the header and footer. However, it currently extends beyond the intended size based on browser dimensions.
https://i.stack.imgur.com/zvxrq.png
Here is my code: https://jsfiddle.net/thbx4pv2/
CSS:
html,
body {
height: 100%;
margin: 0
}
.box {
display: flex;
flex-flow: column;
height: 100%;
font-size: 4em;
}
.box .row {
border: 1px dotted grey;
flex: 0 1 30px;
}
.box .row.header {
flex: 0 1 auto;
}
.box .row.content {
flex: 1 1 auto;
}
.box .row.footer {
flex: 0 1 40px;
}
.xyz {
position: absolute;
margin: 10 10 10 10 ;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 70%;
height: 90%;
overflow: auto;
box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
}
HTML:
<div class="box">
<div class="row header">
<p><b>header</b>
</div>
<div class="row content">
<div class="xyz">
<p>
<b>content</b> (occupies remaining space)
</p>
</div>
</div>
<div class="row footer">
<p><b>footer</b> (fixed height)</p>
</div>
</div>