Content Within Div Won't Fill Available Space Without Specifying Height

I have a page that is separated vertically into two panes. The left side layout is fine but I am having trouble getting content to fill available space on the right. Below is a d

Solution 1:

Try setting up your body vh to a 100vh and the rest of the heights will be easy to set. It might also be necessary to set min-height for some of your items. Be careful with the box sizing and margins so that your content does not outgrow your display or its container. I whipped a small example, see if it works for you.

/**Reset all CSS, this is only a fraction of what you need*/
body, div{
	margin: 0;
	padding: 0;
	border: 0;
	height: 100vh; /*Fix your body to the height of your display*/
  box-sizing: border-box;/*include the padding and border included in the elements total sizet*/
}

/*You can use flex for this excercise*/
#main-container{
  height: 100%; 
  border: 1px solid gray;
  display: -webkit-flex;
  display: flex; 
  -webkit-flex-direction: column;
   flex-direction: column; /**make the direction vertival*/
   box-sizing: border-box;/*include the padding and border included in the elements total sizet*/
   
}

#container-1{
  background-color: red;
  border: 1px solid gray;
  height: 20px;
  box-sizing: border-box;/*include the padding and border included in the elements total sizet*/
  
}

#container-2{
  background-color: blue;
  border: 1px solid gray;
  flex-grow: 1; /**Enable the growth of this element*/
  box-sizing: border-box;/*include the padding and border included in the elements total sizet*/
}

#container-3{
  background-color: green;
  border: 1px solid gray;
  height: 20px;
  box-sizing: border-box;/*include the padding and border included in the elements total sizet*/
}

<div id="main-container">
<div id="container-1">

</div>
<div id="container-2">

</div>
<div id="container-3">

</div>
</div>