Fill parent div height

Question

So. we have 3 div's in my example. Main div is a container and next two are child's. So i would like to know how to extend container more than 100% height of window ( by using auto), and fill the height by 2nd child ( 100% wont work)

Any help will be like appropriate

 #main { margin: 0 auto; width: 100%; height: auto; position: absolute; display: block; background-color: orange; } #nr1 { box-sizing: border-box; display: inline-block; width: 50%; background-color: red; float: left; padding: 5px; margin: 0 auto; height: 1500px; } #nr2 { box-sizing: border-box; display: inline-block; width: 50%; background-color: black; float: left; padding: 5px; margin: 0 auto; height: 100%; } 

 <div id="main"> <div id="nr1"> </div> <div id="nr2"> </div> </div> 

flexbox?! If i will ad a div on top with 100% width and 200 px height, wont fit... Thats why it cant be a flaxbox - https://jsfiddle.net/pgd5mckx/

Answer 1

You can use flexbox and specifically flex-grow to have the child div grow to fill the parents height. Below is the modification working as intended:

HTML

<div id="main">
  <div id="nr1"> </div>
  <div id="nr2"> </div>

</div>

CSS

#main {
  margin: 0 auto;
  width: 100%;
  height: auto;
  position: absolute;
  display: flex;
  flex-direction: row;
  background-color: orange;
}

#nr1 {
  box-sizing: border-box;
  display: inline-block;
  width: 50%;
  background-color: red;
  float: left;
  padding: 5px;
  margin: 0 auto;
  height: 1500px;
}

#nr2 {
  box-sizing: border-box;
  width: 50%;
  background-color: black;
  float: left;
  padding: 5px;
  margin: 0 auto;
  display: flex;
  flex-grow: 1;
}

link to working demo: https://jsfiddle.net/Matthew_/86ptLzxm/3/

For more information on flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

I haven't done it in this example, but I would also recommend not using float to position your elements, but instead make use of flexbox functionality.