How to make inner div of Flexbox height of parent

Question

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;
}

I don't see where you're setting the height of the div to 100%. If you can post a plunkr or something we can help, but in general I find inspecting the hierarchy with chrome usually shows me where i'm missing something. — Jim B., Nov 21 '16 at 02:34
The accepted answer here may help: http://stackoverflow.com/q/33636796/3597276 — Michael Benjamin, Nov 21 '16 at 02:42

score 3 · Accepted Answer · answered Nov 21 '16 at 02:40

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>

How to make inner div of Flexbox height of parent

1 Answers1