Firefox和Chrome之间的缩小差异

Question

以下简化代码示例在Firefox与Chrome上的呈现方式不同。这是浏览器错误的结果，如果是，那么每个规范都在渲染，哪个不是？

我想获得一个错误报告的链接（如果有的话）。

现在，为了我的目的，在这个缩小的示例中添加flex-shrink: 0：navbar，解决了问题，但是我想知道一旦错误得到修复，这是否也会有效。

#fixed {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

#tall {
  height: 300%;
}

.outline {
  outline: 1px solid red;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />

<div id="fixed" class="d-flex flex-column">
  <nav class="navbar outline">
    <a class="btn btn-secondary">Button</a>
  </nav>
  <div id="tall"></div>
</div>

Answer 1

  

flex-shrink Firefox和Chrome之间的差异

存在差异，但flex-shrink似乎不是原因。

  

这是浏览器错误的结果吗？如果是，那么哪个是规格渲染，哪个不是？

它似乎不是一个错误。它看起来更像是一个干预，这是一个故意偏离规范，并由Chrome应用。

flex-shrink: 1

灵活容器的初始设置为flex-shrink: 1，由flexbox spec定义。这意味着允许弹性项目缩小以避免容器溢出。

Chrome和Firefox都遵循此指南。您可以通过检查浏览器的弹性项目的默认样式，在开发人员工具中对此进行验证。 Chrome和Firefox都会使用flex-shrink: 1呈现您的展示项目。

有关详细信息，请参阅：How does flex-shrink factor in padding and border-box?

min-height: auto

列方向容器中弹性项的初始设置为min-height: auto。在行方向容器中，项目设置为min-width: auto。这意味着弹性项目的默认最小大小是其内容的大小或沿主轴的指定长度。

完整详情请参阅：Why don't flex items shrink past content size?

您的代码

您有一个包含两个弹性项目的列方向灵活容器：.navbar和#tall。在Chrome和Firefox中，这两个项目默认设置为flex-shrink: 1和min-height: auto。我使用开发工具验证了这一点。到目前为止，一切看起来都很好所有设置均符合规范。

以下是差异开始的地方： #tall项目设置为height: 300%。这个项目比容器高得多。但是，使用flex-shrink: 1时，不会有溢出。所有具有非零flex-shrink的项目必须减小其大小以防止自己及其兄弟姐妹溢出容器（假设内容的大小允许这样做）。但是对于min-height: auto，这些项目的大小不能低于其内容的高度。

这一切都适用于Firefox。但为什么不在Chrome？为什么被.navbar挤压的#tall项目缩小到Chrome内容（按钮）的大小以下？

火狐

如上所述，由于#tall，带有height: 300%的{​​{1}}元素无法溢出容器。由于flex-shrink，它的兄弟.navbar项也必须缩小。但是，由于flex-shrink，无法缩小低于其内容的大小。都好。一切都符合规范。

铬

与Firefox一样，min-height: auto元素（#tall）因height: 300%而无法溢出容器。由于flex-shrink，它的兄弟.navbar项也必须缩小。但是，由于flex-shrink，，不应缩小低于其内容的大小，但无论如何都要如此。为什么？

干预

  

intervention是指用户代理决定稍微偏离标准化行为以提供极大增强的用户体验。

     

来源：https://github.com/WICG/interventions

来自my answer here：

  

至少从2017年开始，Chrome似乎（1）还原为min-height: auto / min-width: 0默认值，或者（2）在某些情况下自动应用min-height: 0默认值基于神秘算法。 （这可能是他们所谓的intervention。）因此，很多人都看到他们的布局（特别是所需的滚动条）在Chrome中按预期工作，但在Firefox / Edge中却没有。

因此，正如本回答开头所述，您遇到的问题可能不是错误，而是故意偏离规范。 Firefox将完全符合规范。

重要说明

请务必注意，我并不了解Chrome，Firefox或任何其他浏览器的内部工作原理。我只相信Chrome会根据我的个人观察结果进行0干预。这是一个理论。更像是一个推断。我可能不完全（甚至远程？）正确。 Chrome可以摆弄min-height，min-height和/或其他属性。我不确定。

同样重要的是要注意，因为这种行为不符合规范，它可能不可靠并且可以随时更改。