How to fix child element not getting height of its parent element? - html

Question

I have a page like this:
* {
padding: 0;
margin: 0;
}
.pageWrapper {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.header {
background-color: saddlebrown;
height: 40px;
}
.main {
flex: 1;
position: relative;
}
.innerWrapper {
height: 100%;
background-color: red;
display: flex;
justify-content: center;
align-items: center;
}
.footer {
height: 40px;
background-color: blueviolet;
}
<div class="pageWrapper">
<header class="header"></header>
<main class="main">
<div class="innerWrapper">
<button>Button</button>
</div>
</main>
<footer class="footer"></footer>
</div>
As I understand, innerWrapper is not getting 100% height of main because main's height is not defined explicitly, it's flex:1. Is it correct? How do I make innerWrapper get the height of main in this particular case?

Answer 1

Just remove the flex and the heigh properties from the children and add align-items: stretch; and display: flex; to the parent.
* {
padding: 0;
margin: 0;
}
.pageWrapper {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.header {
background-color: saddlebrown;
height: 40px;
}
.main {
display: flex;
flex: 1;
align-items: stretch;
}
.innerWrapper {
background-color: red;
width: 100%;
justify-content: center;
align-items: center;
}
.footer {
height: 40px;
background-color: blueviolet;
}
<div class="pageWrapper">
<header class="header"></header>
<main class="main">
<div class="innerWrapper">
<button>Button</button>
</div>
</main>
<footer class="footer"></footer>
</div>

Answer 2

Your .main is occupying its container's height/width. It is your .innerWrapper that is not occupying the height of its container.
The reason for this is that the height of .main is not explicit. According to this:
If the height of the containing block is not specified explicitly
(i.e., it depends on content height), and this element is not
absolutely positioned, the value computes to 'auto'
You can change .main to be flex also and change .innerWrapper to have flex: 1:
.main {
flex: 1;
position: relative;
background-color: orange; // Added for visual only. Remove from your code.
display: flex;
flex-direction: column;
}
.innerWrapper {
flex: 1;
height: 100%;
background-color: red;
display: flex;
justify-content: center;
align-items: center;
}
See it work here.

Answer 3

I think this is the thing you are trying to achieve...
Check the code. I have added comments to identify the code which is added...
* {
padding: 0;
margin: 0;
}
.pageWrapper {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.header {
background-color: saddlebrown;
height: 40px;
}
.main {
flex: 1;
position: relative;
background-color:blue;
}
.innerWrapper {
height: 100%;
background-color: red;
display: flex;
justify-content: center;
align-items: center;
/*code added here*/
position:absolute;
top:0;
bottom:0;
/* if you want to add button to center add this property here right:50%;*/
}
.footer {
height: 40px;
background-color: blueviolet;
}
<div class="pageWrapper">
<header class="header"></header>
<main class="main">
<div class="innerWrapper">
<button>Button</button>
</div>
</main>
<footer class="footer"></footer>
</div>

Answer 4

If you make the display value block instead of flex at the class .innerWrapper
* {
padding: 0;
margin: 0;
}
.pageWrapper {
display: flex;
flex-flow: column wrap;
min-height: 100vh;
height: 100vh;
}
.header {
background-color: saddlebrown;
height: 40px;
}
.main {
flex: 1 1 auto;
position: relative;
}
.innerWrapper {
height:100%;
background-color: red;
display: block;
text-align:center;
}
.footer {
height: 40px;
background-color: blueviolet;
}
<div class="pageWrapper">
<header class="header"></header>
<main class="main">
<div class="innerWrapper">
<button>Button</button
</div>
</main>
<footer class="footer"></footer>
</div>