如何让 flex-grow div 的孩子身高 100%答案

【问题标题】：How do I get a child of a flex-grow div to have height 100%如何让 flex-grow div 的孩子身高 100%
【发布时间】：2019-07-12 17:21:22
【问题描述】：

在下面的示例中，我希望 innerContent div 是内容 div 的整个高度，但事实并非如此： (plunker link)

.shell{
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: green;
}

.content{
  background-color: red;
  flex-grow: 1;
}

.innerContent{
  background-color: blue;
  height: 100%;
}

html, body {
  height: 100%;
  padding: 0;
  margin: 0;
}

  <body>
    
    <div class="shell">
      
      <div class="header">
        <h1>Hello Plunker!</h1>
      </div>
      
      <div class="content">
        <div class="innerContent">
          Content
        </div>
      </div>
      
      <div class="footer">
        Footer
      </div>
      
    </div>
    
  </body>

预期的行为是内部内容（蓝色）与内容区域（红色）的高度相同。对我来说，我明白了：

【问题讨论】：

innerContent 对我来说和content 一样高吗？
它的工作方式如你所愿。

标签： html css flexbox

【解决方案1】：

这似乎是 Chrome 的错误。 chrome 中 Flexbox 的行为在 chrome 的 71 和 72 版本之间发生了变化。

在 chrome 72 中，我得到了预期的行为：

【讨论】：

【解决方案2】：

这可以通过将 flex-grow: 1; 更改为 flex: 1; 在 chrome 71 上修复。

plunker

【讨论】：