Make only one child take 100% height of parent with display flex?

Question

In the following code I have div with class container having display property set to flex and it has two div children with class sidebarcontainer and mainpage and I want div with class 'sidebarcontainer' to take 100% height of parent div.

code: https://jsfiddle.net/dydjgp9g/

But actually I don't necessarily want display: flex to parent but if I remove than whole page shift down!

How to do that?

 /*******************page layout**************************/ .container { width: 100%; background-color: #d5d5d5; display: flex; align-items: flex-start; } .sidebarcontainer { width: 250PX; /*height: 6000px;*/ display: inline-block; box-sizing: border-box; padding: 5px; padding-right: 2px; } .innersidebarcontainer { position: relative; width: 100%; height: 100%; } .sidebar { width: 243px; background-color: white; height: 500px; /*top: 1px;*/ /*bottom: 0;*/ /*position: absolute;*/ } .mainpage { width: calc(100% - 250px); padding: 5px; padding-left: 2px; height: 600px; display: inline-block; box-sizing: border-box; } .page { width: 100%; height: 100%; background-color: white; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: baseline; align-content: flex-start; } .footer { height: 500px; width: 100%; margin: 0 auto; background-color: #031003; } /***************end of pagelayout******************/ .card { width: 250px; /*height: 400px;*/ align-self: flex-start; margin: 10px; display: inline-block; } .image { width: 200px; margin: 0 auto; height: 250px; } .image img { width: 100%; height: 100%; } 

 <div class="container"> <div class="sidebarcontainer"> <div class="innersidebarcontainer"> <div class="sidebar"> </div> </div> </div> <!-- --> <div class="mainpage"> <div class="page"> <h1>page</h1> </div> </div> </div> <div class="footer"></div> 

Answer 1

An initial setting of a flex container is align-items: stretch . This means that a flex item will expand to cover the length of the cross axis.

In a flex container with flex-direction: row , the cross axis is the height.

So if you want your sidebar to take the height of the parent, first remove align-items: flex-start . That's overriding the default stretch value.

.container {
  width: 100%;
  background-color: #d5d5d5;
  display: flex;
  /* align-items: flex-start; */
}

Second, since you have nested elements, make the flex item into a flex container so that the children also get align-items: stretch . And remove any height values, as they also override the stretch default.

Lastly, if you don't want all columns to have equal height – maybe you want one column to have content height – you can use align-self: flex-start on individual items, which overrides the align-items: stretch coming from the parent. See here for full details: How to disable equal height columns in Flexbox?

revised demo

 /*******************page layout**************************/ .container { width: 100%; background-color: #d5d5d5; display: flex; /* align-items: flex-start; */ } .sidebarcontainer { width: 250PX; /*height: 6000px;*/ display: inline-block; box-sizing: border-box; padding: 5px; padding-right: 2px; } .innersidebarcontainer { position: relative; width: 100%; height: 100%; display: flex; /* NEW */ } .sidebar { width: 243px; background-color: white; /* height: 500px; */ /*top: 1px;*/ /*bottom: 0;*/ /*position: absolute;*/ } .mainpage { width: calc(100% - 250px); padding: 5px; padding-left: 2px; height: 600px; display: inline-block; box-sizing: border-box; } .page { width: 100%; height: 100%; background-color: white; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: baseline; align-content: flex-start; } .footer { height: 500px; width: 100%; margin: 0 auto; background-color: #031003; } /***************end of pagelayout******************/ .card { width: 250px; /*height: 400px;*/ align-self: flex-start; margin: 10px; display: inline-block; } .image { width: 200px; margin: 0 auto; height: 250px; } .image img { width: 100%; height: 100%; } 

 <div class="container"> <div class="sidebarcontainer"> <div class="innersidebarcontainer"> <div class="sidebar"> </div> </div> </div> <!-- --> <div class="mainpage"> <div class="page"> <h1>page</h1> </div> </div> </div> <div class="footer"></div>