Component to take all available height with Flexbox (in Quasar/Vue) - css

Question

I'm building a component with header/main content/ footer where the main content will be scrollable. While I can do this in Js, I need the component to take all available space on height and footer to be at the bottom.
I can't get it to take the whole height, even if the code is correct.
Here is a pen with the not-working code: https://codepen.io/SharpBCD/pen/MNgxgY
.panel {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
flex-grow: 1;
justify-content: flex-start; /* align items in Main Axis */
align-items: stretch; /* align items in Cross Axis */
align-content: stretch; /* Extra space in Cross Axis */
background-color: #00acc1;
}
.panel-header{
flex: 0 1 auto;
/*max-height: fit-content;*/
}
.panel-main{
/*margin-bottom: auto;*/
display: flex;
flex-direction: column;
flex: 1; /* same as flex: 1 1 auto; */
justify-content: flex-start; /* align items in Main Axis */
align-items: stretch; /* align items in Cross Axis */
align-content: stretch; /* Extra space in Cross Axis */
background-color: #0d47a1;
}
.panel-footer{
margin-top: auto;
max-height: fit-content;
}
Here is a jsfiddle with the working code that I tried: https://jsfiddle.net/MadLittleMods/LmYay/
.flexbox-parent
{
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start; /* align items in Main Axis */
align-items: stretch; /* align items in Cross Axis */
align-content: stretch; /* Extra space in Cross Axis */
background: rgba(255, 255, 255, .1);
}
.flexbox-item-grow
{
flex: 1; /* same as flex: 1 1 auto; */
}
.fill-area
{
display: flex;
flex-direction: row;
justify-content: flex-start; /* align items in Main Axis */
align-items: stretch; /* align items in Cross Axis */
align-content: stretch; /* Extra space in Cross Axis */
}
So... what's the problem? What do i do wrong?

Answer 1

Give responsibility to the parent
Making the component responsible for taking the whole space has not been successful for me without extra tinkering. A simpler solution is to use the items-stretch class for a row, then put a col in to be streched.
This might be more intuitive for others.
Shown below with q-card as an example. This should work with whatever child component you choose, provided you use appropriate row / col classes.
<q-page id="addressesOverview" class="q-pa-md row items-stretch">
<q-card class="col-12">
<q-card-section> ... </q-card-section>
</q-card>
</q-page>
If you have a common component to display the q-page, you can change it to :class and add the items-stretch class dynamically.
Link: Quasar Docs - Flexbox - Alignment

Answer 2

If you want to use the flex model and lay your #q-app on the whole height of the window, you need to start building the flex layout from the root.
you can use the following styles :
/* update */
#q-app {
height:100vh;/* or min-height:100vh if you want it to grow */
display:flex;
}
.q-pa-md{
flex:1;
display:flex;
flex-direction:column;
}
/* end update */
Demos (snippet to run or forked codepens):
/* update */
body {
margin:0;
}
#q-app {
min-height:100vh;
display:flex;
}
.q-pa-md{
flex:1;
display:flex;
flex-direction:column;
}
/* end update */
.panel {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
flex-grow:1;
justify-content: flex-start; /* align items in Main Axis */
align-items: stretch; /* align items in Cross Axis */
align-content: stretch; /* Extra space in Cross Axis */
background-color: #00acc1;
}
.panel-header{
flex: 0 1 auto;
/*max-height: fit-content;*/
}
.panel-main{
/*margin-bottom: auto;*/
display: flex;
flex-direction: column;
flex: 1; /* same as flex: 1 1 auto; */
justify-content: flex-start; /* align items in Main Axis */
align-items: stretch; /* align items in Cross Axis */
align-content: stretch; /* Extra space in Cross Axis */
background-color: #0d47a1;
}
.panel-footer{
margin-top: auto;
max-height: fit-content;
}
<!--
Forked from:
https://quasar.dev/layout/grid/column#Example--Equal-Height-Example
-->
<div id="q-app">
<div class="q-pa-md">
<p> irelevant text to ocupy space before panel</p>
<div class=" panel">
<div class=" panel-header">
I'm a header
</div>
<div class = "panel-main">
Main content
</div>
<div class=" panel-footer">
I'm a footer
</div>
</div>
</div>
</div>
or play with the fork https://codepen.io/gc-nomade/pen/RXbmYj
another version with overflow to keep footer at bottom and let main content scroll https://codepen.io/gc-nomade/pen/rXBgRV

Answer 3

simply your <html> and <body> were not occupying the whole page and the same for the children nodes ...just add this to your css :
html,body,#q-app,.q-pa-md {
height:100%;
width: 100%;
}
codepen