Question 42621 in Html Question posted in
Some basic documentation can be found here.

How to have nested div take up available height? – Html

I want to have the .expandToFill div expand to fill the remaining screen height. I built something with flexbox as this seems like the most straightforward solution. It has to be nested in this way, please don’t change the html.

Say I don’t know the height value of the .menu div.

.wrapper {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.router {
  flex-grow: 1;
}

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

.menu {
  background-color: red;
  height: 20px;
}

.expandToFill {
  flex-grow: 1;
  background-color: blue;
}
<div class="wrapper">
  <div class="router">
    <div class="container">
      <div class="menu">
      </div>
      <div class="expandToFill">
      </div>
    </div>
  </div>
</div>

https://jsfiddle.net/BAR24/a2m4cjsw/17/

There are similar questions on SO but they don’t ask about nested expandable divs.

Tags:

2

Answers


  1. 0

    You’re almost there. The only issue is your container needs a height for the flex-grow to fill.

    Add height: calc(100vh - 20px); to .container and you’re done.

    Not the only way it could be done, but it works.

    Login or Signup to reply.
  2. 0 
    .wrapper {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.router {
  flex-grow: 1;
}

.container {
  display: flex;
  flex-direction: column;
  height: 100%; /* <<------------ HERE */
}

.menu {
  background-color: red;
  height: 20px;
}

.expandToFill {
  flex-grow: 1;
  background-color: blue;
}
    <div class="wrapper">
  <div class="router">
    <div class="container">
      <div class="menu">
      </div>
      <div class="expandToFill">
      </div>
    </div>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search