弹性项目内部高度 100%

Question

我的布局主要分为 3 个部分，中间的部分应该占据整个高度。确实如此。

但是，我需要一个额外的 div 来扮演背景的角色，问题就来了。孩子不想走 100% 的高度。

这里.body 是一个在内容不足时被拉伸的 div，而.bg-gray 是我想要获取其父级全高的那个。

有没有办法不使用相对+绝对定位来实现这一点？

另外，我正在寻找我的问题的答案：为什么会这样。

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>

Answer 1

将弹性框应用到.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>