Question

在下面的示例中，我希望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>

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

Answer 1

这似乎是Chrome的错误。在Chrome浏览器中，Flexbox的行为在Chrome版本71和72之间已更改。

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

Answer 2

可以通过将flex-grow: 1;更改为flex: 1;在chrome 71上解决此问题。

plunker

我如何让弹性成长div的孩子的身高达到100％

2 个答案: