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

Posted 2023-03-06

技术标签:

【中文标题】如何让 flex-grow div 的孩子身高 100%【英文标题】：How do I get a child of a flex-grow div to have height 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 一样高吗？它的工作方式如你所愿。 【参考方案1】：

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

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

【讨论】：

【参考方案2】：

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

plunker

【讨论】：

以上是关于如何让 flex-grow div 的孩子身高 100%的主要内容，如果未能解决你的问题，请参考以下文章

如何设置孩子相对于其弹性成长的父母的身高？