height 100% in flex
You can overlap (nest) flex boxes :
html, body {
margin: 0;
padding: 0;
height: 100%;
}
.wrapper {
border: 1px solid red;
padding: 20px;
min-height: 100%;
display: flex;
/* change flex-direction from column to row will work */
flex-direction: column;
box-sizing:border-box;
}
.container {
display:flex;
flex-direction: column;/* up to your needs */
border: 1px solid green;
padding: 20px;
flex: 1;
}
.content {
border: 1px solid blue;
flex:1;
}<div class="wrapper">
<div class="container">
<div class="content">
Hello there
</div>
</div>
</div>You may also mind the box-sizing properties to include borders and padding in size calculation.