Height 100% inside flex item

Question

I have a layout that is mainly divided into 3 parts and the middle one should take a full height. And it does.

However, I need an additional div which will play a role of the backdrop and here the problem comes. The child doesn't want to take 100% height.

Here .body is a div that is being stretched when there is not enough content and .bg-gray is the one I want to take its parent full height.

Is there a way achieve this without using relative + absolute positioning?

Also, I'm looking for the answer to my question: why is this happening that way.

html, body {
  padding: 0;
  margin: 0;
}

.container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.header {
  height: 50px;
  background-color: #e6e6e6;
}

.footer {
  height: 50px;
  background-color: #aaa444;
}

.body {
  flex: 1;
}

.bg-gray {
  background-color: #eee;
  min-height: 100%;
  flex: 1;
}

<div class="container">
  
  <div class="header">
 
  </div>
  
  <div class="body">

    <div class="bg-gray">
      <div>
        asdasd
      </div>
    </div>
    
  </div>
  
  
  <div class="footer">
 
  </div>
  
</div>

if you change min-height by height (inside .container) it will work, here is the details: https://stackoverflow.com/questions/56700510/behavior-with-height-minheight-and-displayflex/56701229#56701229 — Temani Afif, Jun 25 '19 at 12:38
@TemaniAfif it doesn't change anything. either `height` or `min-height` no difference — Sergey, Jun 25 '19 at 12:40
if you change the min-height of the container to height (not the min-height of the element) — Temani Afif, Jun 25 '19 at 12:41

score 0 · Answer 1 · answered Jun 25 '19 at 12:42

Apply flexbox to the .body div.

.body {
  flex: 1;
  display: flex;
  flex-direction: column;
}

html,
body {
  padding: 0;
  margin: 0;
}

.container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.header {
  height: 50px;
  background-color: #e6e6e6;
}

.footer {
  height: 50px;
  background-color: #aaa444;
}

.body {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.bg-gray {
  background-color: darkgrey;
  min-height: 100%;
  flex: 1;
}

.bg-gray div {
  background: lightblue;
}

<div class="container">

  <div class="header">

  </div>

  <div class="body">

    <div class="bg-gray">
      <div>
        asdasd
      </div>
    </div>

  </div>


  <div class="footer">

  </div>

</div>

Sorry but that is inappropriate because it breaks my other layout :) I've started my tries from that — Sergey, Jun 25 '19 at 12:44
with giving .body to display flex its take full height as you told in your question let us know about your other layout so we can fix that is any break in your other layout — Harshad Prajapati, Jun 25 '19 at 12:56

Height 100% inside flex item

1 Answers1