height 100% doesn't work under column flexbox ancestor

Question

.layout {
  display: flex;
  flex-direction: column;

  min-height: 100vh;
}

.body {
  flex-grow: 1;
  flex-shrink: 0;
  background-color: #a0a0a0;
}

.content {
  height: 100%;
  background-color: #c0c0c0;
}

<div class="layout">
  Header
  <div class="body">
    Body
    <div class="content">
      Content
    </div>
  </div>
  Footer
</div>

Why doesn't div.content occupy 100% of window?
Is there a way to make div.content span 100% vertically while having div.layout flexbox?
If there isn't, how can I make it while having this header-body-footer structure?

Edit 1

div.body should follow default display property. I can't make it flexbox.

Percentage height does not work with min-height. It requires a determined parent height to function. — Paulie_D, Aug 18 '22 at 04:23
*div.body should follow default display property. I can't make it flexbox.* --> then what you want is not possible — Temani Afif, Aug 18 '22 at 08:38
the simpliest solution is to use `display: grid; grid-auto-rows: auto 1fr;` on body element — Temani Afif, Aug 18 '22 at 08:41

score 1 · Answer 1 · answered Aug 18 '22 at 04:29

1

.layout {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.body {
    flex-grow: 1;
    flex-shrink: 0;
    background-color: #a0a0a0;
    display: flex;
    flex-direction: column;
}

.content {
    height: 100%;
    background-color: #c0c0c0;
    flex-grow: 1;
    flex-shrink: 0;
}

<div class="layout">
  Header
  <div class="body">
    Body
    <div class="content">
      Content
    </div>
  </div>
  Footer
</div>

answered Aug 18 '22 at 04:29

Manoj M

189
2
4

This works, but I forgot to mention that I can't customize `div.layout` or `div.body` to have any other display property. – Changdae Park Aug 18 '22 at 07:11

score 0 · Answer 2 · answered Aug 18 '22 at 04:07

0

.layout {
      display: flex;
      flex-direction: column;
      height: 100vh;
    }

edit div.latout code -> min-height change height

answered Aug 18 '22 at 04:07

young

60
6

height 100% doesn't work under column flexbox ancestor

Edit 1

2 Answers2