I am having trouble filling the remaining surface of my page until the footer with a panel using the style panel-grow-shrink. Any suggestions on how to make it work?
.flex-column-container {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: flex-start;
align-content: stretch;
align-items: stretch;
}
.panel-grow-shrink {
order: 0;
flex: 1 1 auto;
align-self: stretch;
background-color:red;
}
.btn-toolbar {
/*margin-left: -5px;*/
}
.panel-body {
padding: 15px;
}
body{
background-color:yellow;
}<div class="flex-column-container">
<div>
<h1><span>Title</span></h1>
</div>
<div class="panel-body">
<div class="panel-grow-shrink">
Panel fills the remaining area
</div>
<div class="btn-toolbar">
<button type="button" >Button1</button>
<button type="button" >Button2</button>
<button type="button" >Button3</button>
<button type="button" >Button4</button>
</div>
</div>
</div>I am looking to add a footer at the bottom of the page, and I want the panel with the class panel-grow-shrink to expand to fill the height of the remaining surface. However, in this example, the footer is not positioned at the bottom as intended.