how to size div to fit the remaining page content with flex

Question

I have the following markup:

.layout {
  display: flex;
  flex-direction: column;
  background-color: gray;
  height: 100vh;
}

.app-bar {
  background-color: lightblue;
}

.app-drawer {
  background-color: black;
  color: white;
  flex-grow: 1;
}

.app-sidebar-container {
  
  
}

<div class="layout">
  <div id="app-bar-container">
    <div class="app-bar">APP BAR</div>
  </div>
  <div id="app-sidebar-container" class="app-sidebar-container">
    <div class="app-drawer">DRAWER AND CONTENT</div>
  </div>
</div

How should I modify this in order to get the drawer and content black div to stretch the entire remaining layout element (gray)?

Thanks.

Refer to this post - https://stackoverflow.com/questions/70662848/stretch-last-div-element-to-fill-the-remaing-space-css-flex/70662972#comment124917586_70662972 — Shiju Nambiar, Jan 17 '22 at 10:33

score 1 · Accepted Answer · answered Jan 17 '22 at 10:33

flex-grow only works for direct child.

.layout {
  display: flex;
  flex-direction: column;
  background-color: gray;
  height: 100vh;
}

.app-bar {
  background-color: lightblue;
}

.app-drawer {
  background-color: black;
  color: white;
  /* new line */
  height: 100%;
}

.app-sidebar-container {
  /* new line */
  flex-grow: 1;
}

<div class="layout">
  <div id="app-bar-container">
    <div class="app-bar">APP BAR</div>
  </div>
  <div id="app-sidebar-container" class="app-sidebar-container">
    <div class="app-drawer">DRAWER AND CONTENT</div>
  </div>
</div

score 0 · Answer 2 · answered Jan 17 '22 at 10:32

Give the background-color to the .app-sidebar-container class and give that height: 100%. That will fill make the element stretch to the entire grey area.

Alternatively you could give both the .app-sidebar-container and the .app-drawer a height of 100%.
Both should work.

score 0 · Answer 3 · answered Jan 17 '22 at 10:45

change your css like this:

.layout {
      display: flex;
      flex-direction: column;
      background-color: gray;
      height: 100vh;
    }

    #app-bar-container {
      flex-grow: 0.1
    }

    .app-bar {
      background-color: lightblue;
      height: 100%;
    }
    
    .app-sidebar-container {
      flex-grow: 1;

    }

    .app-drawer {
      height: 100%;
      background-color: black;
      color: white;
      flex-grow: 1;
    }

how to size div to fit the remaining page content with flex

3 Answers3