Encountering a seemingly straightforward issue where I am unable to make an inner div 100% height of the parent div, which is set with min-height 70vh. My goal is to have the table inside be 100% height and content vertically aligned. It currently works if I set the parent's height to 70vh, but this restricts the ability to add more content. Check out the fiddle below:
https://jsfiddle.net/RustyBadRobot/zgesx50L/8/
.hero-row {
position: relative;
z-index: 10;
background: #f8f9fa;
min-height: 70vh;
height: 70vh; /* This makes it work but if content goes over fails to expand */
padding-top: 0;
padding-bottom: 0;
}
.centrize {
position: relative;
display: table;
table-layout: fixed;
height: 100%;
width: 100%;
}