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

Question

我有一些代码目前可以在 Chrome 稳定版上正确呈现。我收到了有关代码在 Beta 和 Dev 上运行不正确的报告，并且我能够在 Canary 上重现该问题。我发现this PSA 似乎与我的问题有关。所以，我的工作是假设这是一个更紧密地遵循规范而不是错误的更改。

我的软件仅针对 Google Chrome。因此，尽管具有向后兼容性会很好，但不一定需要强大的解决方案。

设置是：

• 父元素具有display:flex、flex-direction: column 并应用了max-height。
• 父级的深后代超过max-height

而行为改变是：

• 在稳定状态下，max-height 被强制执行，孩子不会爆发。
• 在金丝雀上，max-height 被忽略并且孩子爆发。

我可以通过将max-height 应用于inner 元素来防止孩子爆发。但是，这是不可取的，因为我需要将max-height 的值减少footer 的高度，这在非人为的示例中不容易做到。

以下代码 sn-p 突出显示了我的问题：

.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

我相信我理解这个问题，但随着我对解决方案的了解更多，我会更多地基于这个答案。

此问题是由于this bug filed against Chromium 的解决而引入的。规范表明弹性容器的默认值应该是min-height: auto，而目前它是min-height: 0。

具体评论指出这是对所有生产网站的重大更改，并引用了建议的更改：

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

变化是：

如果这个补丁破坏了任何网站或 chrome UI，修复很可能 添加：

最小宽度：0；

最小高度：0；

将min-height: 0 应用到.inner 得到的布局与我目前在stable 上看到的一致。