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

Question

In the following code I have div with class containerhaving 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>

Michael Benjamin · Accepted Answer · 2017-08-01T15:25:57.210

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>

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

1 Answers1