Firefox和Chrome之间的缩小差异

Question

以下简化代码示例在Firefox与Chrome上的呈现方式不同.这是浏览器错误的结果吗？如果是这样,哪个是按规格呈现,哪个不是？

如果可以的话,我想获得一个错误报告的链接.

现在,为了我的目的,flex-shrink: 0在这个缩小的例子中添加:navbar,解决了问题,但是我想知道一旦bug修复后这是否也会起作用...

#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规范所定义的,Flex容器的初始设置.这意味着允许flex项目缩小以避免容器溢出.

Chrome和Firefox都遵循此指南.您可以通过检查浏览器的弹性项目的默认样式,在开发人员工具中对此进行验证.Chrome和Firefox都会渲染您的灵活项目flex-shrink: 1.

有关更多详细信息,请参阅:填充和边框中的flex-shrink因子如何？

min-height: auto

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

更多详细信息请参阅:为什么Flex项目不会缩小内容大小？

你的代码

您有一个包含两个弹性项目的列方向Flex容器:.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,带有a 的元件height: 300%不能溢出容器,因为flex-shrink.它的兄弟,.navbar项目,也必须缩小,因为flex-shrink.但是,它不能缩小到低于其内容的大小,因为min-height: auto.都好.一切都符合规范.

铬

就像在Firefox中一样#tall,带有a 的元素height: 300%不能溢出容器因为flex-shrink.它的兄弟,.navbar项目,也必须缩小,因为flex-shrink.但是,由于它不应该缩小到其内容的大小min-height: auto,但无论如何它都会.为什么？

干预

的干预是当一个用户代理决定,以提供一个大大增强用户体验,从一个标准化的行为稍有偏差.

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

从我在这里的回答:

至少从2017年开始,Chrome似乎是(1)恢复到min-width: 0/ min-height: 0默认值,或者(2)0在某些情况下根据神秘算法自动应用默认值.(这可能是他们所说的干预措施.)因此,许多人看到他们的布局(特别是所需的滚动条)在Chrome中按预期工作,但在Firefox/Edge中却没有.

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

重要笔记

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

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