Chrome上的Flexbox最大高度解释更改

Question

我有一些代码,目前正在Chrome Stable上正确呈现.我收到有关代码在Beta和Dev上工作不正确的报告,我能够在Canary上重现该问题.我发现这个PSA似乎与我的问题有关.所以,我正在假设这是一个更严格遵循规范而不是错误的变化.

我的软件仅定位到Google Chrome.因此,不一定需要强大的解决方案,尽管向后兼容性会很好.

设置是:

• 父元素都有display:flex,flex-direction: column并且已经max-height应用到它.
• 父母的深层后裔超过了 max-height

行为改变是:

• 在稳定,max-height强制执行和孩子不爆发.
• 在金丝雀上,max-height被忽视,孩子爆发.

我能够防止儿童通过应用突破max-height的inner元素.然而,这是不可取的,因为我需要在非设计的例子中减少max-height高度footer不容易做到的值.

以下代码段突出显示了我的问题:

.outer {
  display: flex;
  flex-direction: column;
  max-height: 410px;
}
.inner {
  display: flex;
  flex-direction: column;
}
.content {
  width: 200px;
  height: 500px;
  background-color: green;
}
.footer {
  height: 20px;
  width: 200px;
  background-color: red;
}

<div class='outer'>
  <div class='inner'>
    <div class='content'>
    </div>
  </div>
  <div class='footer'>
  </div>
</div>

以下是Chrome Canary(左)与Chrome Stable(右)的渲染截图:

有没有人能告诉我如何调整这个代码,这样inner+ footer尊重max-height的价值outer？

Answer 1

我相信我理解这个问题,但是当我对解决方案有更多了解时,我会更多地依据这个答案.

由于解决了针对Chromium的此错误,因此引入了此问题.规范表明Flex容器的默认值应该是min-height: auto当前的位置min-height: 0.

一个具体的评论解决了这一事实,即这是对所有生产网站的重大变化,并引用了建议的更改:

• https://code.google.com/p/chromium/issues/detail?id=426898#c17

变化是:

如果此修补程序破坏任何网站或chrome UI,修复程序可能会添加:

min-width:0;

最小高度:0;

应用min-height: 0到.inner导致与我目前看到稳定一致的布局.