HTML/CSS Height of div dependent on other divs

Question

I am trying to build a sidebar that takes up 100% of the browser's height. Inside this sidebar, there are two divs that will be changing in size depending on the content inside.

<div class="sidebar">
  <div class="child-1"></div>
  <div class="child-2"></div>
</div>

https://i.stack.imgur.com/ffEQd.png (Sorry, I did my best to show an example)

As you can see, The sidebar starts out with child-2 taking up about 80% of the height (even if its content doesn't fill up the div) and child-1 only taking up about 20% of the height. However, as child-1's content grows, child-2 gets smaller. If child-2's content overflows, I will probably be using overflow-y: scroll in order to be able to contain its content. Likewise, once child-1 reaches a max-height, I want it to be able to vertically scroll as well.

I can't quite wrap my head around how to do this and handle the changing heights with only CSS. Any help or direction is appreciated. Thanks!

Possible duplicate of [Make a div fill the height of the remaining screen space](http://stackoverflow.com/questions/90178/make-a-div-fill-the-height-of-the-remaining-screen-space) — reinder, Feb 19 '16 at 07:27

Peyman Mohamadpour · Answer 1 · 2016-02-19T07:40:23.233

Why not using flex

body{ margin: 0; }
.sidebar{
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.child-1{
  background-color: #8989Ef;
}
.child-2{
  background-color: #EF8989;
  flex: 1;
}

<div class="sidebar">
  <div class="child-1">
    <p>this is content</p>
    <p>this is content and this content is long</p>
    <p>this is content</p>
    <p>this is content and this content is long</p>
  </div>
  <div class="child-2"></div>
</div>

score 0 · Answer 2 · answered Feb 19 '16 at 07:29

0

you can do this through jquery,

you have to get height of each div and then check which div have maximum height. After getting this you have to set this maximum height to each div.

and in CSS you can define maximum height and then overflow-y scroll.

answered Feb 19 '16 at 07:29

surender kumar

11
1

score 0 · Answer 3 · answered Feb 19 '16 at 07:30

0

Use flexbox.

.sidebar {
display: flex;
flex-flow: column nowrap;
}

You would then modify the flex-basis of the two child elements to get it exactly how you want it.

answered Feb 19 '16 at 07:30

Forever Covalent Emerging

9
1

score 0 · Answer 4 · answered Feb 19 '16 at 08:01

Hi you can try this CSS

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

.child-1 {
  overflow-y: scroll;
  flex: 10 0 auto;
  min-height: 20vh;
  max-height: 80vh; // let's say the maximum height of child 1 is 80%
}

.child-2 {
  overflow-y: scroll;
  flex: 0 1 auto;
}

You should aware that flexbox is still pretty new CSS feature, so be caution for the older browsers.

HTML/CSS Height of div dependent on other divs

4 Answers4