html – Firefox和Chrome之间的flex-shrink差异

以下简化代码示例在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>

解决方法

flex-shrink discrepancy between Firefox and Chrome

存在差异,但灵活缩小似乎不是原因.

Is this the result of a browser bug,and if so,which is rendering per spec,and which is not?

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

flex-shrink：1

Flex容器的初始设置为flex-shrink: 1,由flexbox spec定义.这意味着允许Flex项目收缩以避免容器溢出.

Chrome和Firefox都遵循此指南.您可以通过检查浏览器的弹性项目的默认样式,在开发人员工具中对此进行验证. Chrome和Firefox都使用flex-shrink渲染您的flex项目：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?

你的代码

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

这是差异开始的地方：#tall项目设置为高度：300％.这个项目比容器高得多.但是,使用flex-shrink：1可以没有溢出.所有具有非零弯曲收缩的项目必须减小它们的尺寸以防止它们自己和它们的兄弟姐妹溢出容器(假设内容的大小允许这样).但是使用min-height：auto,项目不能将其大小减小到低于其内容的高度.

这一切都适用于Firefox.但为什么不在Chrome？为什么.tavbar项目被#tall压缩,缩小到Chrome内容(按钮)的大小？

火狐

如上所述,高度为300％的#tall元素由于柔性收缩而不能溢出容器.它的兄弟,.navbar项目,由于柔性收缩也必须缩小.但是,由于min-height：auto,它不能缩小到低于其内容的大小.都好.一切都符合规范.

铬

与Firefox一样,高度为300％的#tall元素由于flex-shrink而无法溢出容器.它的兄弟,它不应缩小到低于其内容的大小,但无论如何它都会.为什么？

干预

An 07004 is when a user agent decides to deviate slightly from a standardized behavior in order to provide a greatly enhanced user experience.

source: 07005

从my answer here开始：

Since at least 2017,it appears that Chrome is either (1) reverting back to the min-width: 0 / min-height: 0 defaults,or (2) automatically applying the 0 defaults in certain situations based on a mystery algorithm. (This could be what they call an 07004.) As a result,many people are seeing their layout (especially desired scrollbars) work as expected in Chrome,but not in Firefox / Edge.

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

重要笔记

请务必注意,我并不了解Chrome,Firefox或任何其他浏览器的内部工作原理.我只相信Chrome会根据我的个人观察应用最小高度干预.这是一个理论.更像是一个推断.我可能不完全(甚至远程？)正确. Chrome可以摆弄最小高度,柔性收缩和/或其他属性.我不确定.

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

html – Firefox和Chrome之间的flex-shrink差异

解决方法

相关文章