Greg Gum Greg Gum - 19 days ago 5
CSS Question

How to make inner div of Flexbox height of parent

I am using the flexbox to lay out a web app. It works, except for the main content area. The "router-view" is the expected full height. But the div inside of this is NOT full height of the router-view?

How do I make the div with id of "make-full-height" full height?

I have tried setting the height to 100%, but this has no effect.

html

<div class="full-screen flex-container-column">
<div class="header no-flex">
Fixed Header
</div>

<!--The router-view IS full height-->
<router-view class="flexible">
<div id="make-full-height">
How do I make this div full height?
</div>
</router-view>
<div class="footer no-flex">
Fixed Footer
</div>
</div>


css

.full-screen {
height: 100vh;
}

.flex-container-column {
display: flex;
flex-direction: column;
}

.no-flex {
flex: 0 0 auto;
overflow: auto;
}
.footer {
height: 30px;
background: #555;
color: white;
}

.header{
height: 50px;
background: #555;
color: white;
}


.flex-container {
flex: 1 1 auto;
display: flex;
overflow: hidden;
}
.left, .right {
width: 200px;
background: #eee;
}
.flexible {
flex: 1 1 auto;
}

Answer

Set the <router-view to have display: flex, and set flex:1 for the #make-full-height. This way #make-full-height will fill it's container since there are no other children.

.full-screen {
  height: 100vh;
}

.flex-container-column {
  display: flex;
  flex-direction: column;
}

.no-flex {
  flex: 0 0 auto;
  overflow: auto;
}
.footer {
  height: 30px;
  background: #555;
  color: white;
}

.header{
  height: 50px;
  background: #555;
  color: white;
}


.flex-container {
  flex: 1 1 auto;
  display: flex;
  overflow: hidden;
}
.left, .right {
  width: 200px;
  background: #eee;
}
.flexible {
  flex: 1 1 auto;
  background-color: #88F;
  display: flex;
}

#make-full-height {
  flex : 1;
  background-color: #8F8;
 }
<div class="full-screen flex-container-column">
     <div class="header no-flex">
         Fixed Header
     </div>

     <!--The router-view IS full height-->
     <router-view class="flexible">
         <div id="make-full-height">
             How do I make this div full height?
         </div>
     </router-view>
     <div class="footer no-flex">
        Fixed Footer
     </div>
</div>