Firefox 和 Chrome 之间的 flex-shrink 差异 [英] flex-shrink discrepancy between Firefox and Chrome

问题描述

以下简化的代码示例在 Firefox 和 Chrome 上呈现不同.这是浏览器错误的结果吗?如果是，哪个是按照规范渲染的，哪个不是?

如果有的话，我想得到一个错误报告的链接.

现在，为了我的目的，在这个简化的例子中添加 flex-shrink: 0 到:navbar，解决了问题，但我想知道这是否也适用于未来一次该错误可能已修复...

#fixed {位置:固定；顶部:0；右:0；底部:0；左:0；}#高 {高度:300%；}.大纲 {轮廓:1px纯红色；}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="样式表"/><div id="fixed" class="d-flex flex-column"><nav class="导航栏大纲"><a class="btn btn-secondary">按钮</a></nav><div id="高"></div>

解决方案

flex-shrink Firefox 和 Chrome 之间的差异

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

<块引用>

这是浏览器错误的结果，如果是，哪个是按照规范渲染的，哪个不是?

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

<小时>

flex-shrink: 1

flex 容器的初始设置是 flex-shrink: 1，由 flexbox 规范.这意味着允许 flex 项目收缩以避免溢出容器.

Chrome 和 Firefox 均遵守此指南.您可以在开发人员工具中通过检查浏览器的 flex 项默认样式来验证这一点.Chrome 和 Firefox 都使用 flex-shrink: 1 来渲染你的弹性项目.

更多详情参见:padding和border-box中的flex-shrink因子如何?

<小时>

最小高度:自动

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

更多详细信息，请参阅:为什么 flex 项目不会缩小超过内容大小?

<小时>

您的代码

您有一个列方向 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 中缩小到其内容(按钮)的大小以下?

<小时>

火狐

如上所述，具有 height: 300% 的 #tall 元素不会因为 flex-shrink 而溢出容器.它的兄弟，.navbar 项，也必须因为 flex-shrink 而缩小.但是，由于min-height: auto，它不能缩小到其内容的大小以下.都好.一切都符合规范.

<小时>

铬

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

<小时>

干预

<块引用>

intervention 是当用户代理决定稍微偏离标准化行为以提供大大提升了用户体验.

来源: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 和/或其他属性.我不确定.

还需要注意的是，由于此行为不符合规范，因此可能不可靠并且随时可能更改.

The following reduced code sample renders differently on Firefox vs Chrome. Is this the result of a browser bug , and if so, which is rendering per spec, and which is not?

I'd like to get a link to a bug report, if available.

Right now, for my purposes, adding flex-shrink: 0 to in this reduced example: navbar, solves the problem, but I'd like to know if this would also work in future once the bug may be fixed...

#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

There is a discrepancy but flex-shrink doesn't appear to be the cause.

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

It doesn't appear to be a bug. It looks more like an intervention, which is a deliberate deviation from the spec, and is being applied by Chrome.

---

flex-shrink: 1

An initial setting of a flex container is flex-shrink: 1, as defined by the flexbox spec. This means that flex items are permitted to shrink in order to avoid overflowing the container.

Both Chrome and Firefox adhere to this guidance. You can verify this in developer tools by checking the browser's default styles for flex items. Both Chrome and Firefox render your flex items with flex-shrink: 1.

For more details see: How does flex-shrink factor in padding and border-box?

---

min-height: auto

An initial setting of flex items in a column-direction container is min-height: auto. In a row-direction container the items are set to min-width: auto. This means that the default minimum size of a flex item is the size of its content or its specified length along the main axis.

Full more details see: Why don't flex items shrink past content size?

---

Your code

You have a column-direction flex container with two flex items: .navbar and #tall. In Chrome and Firefox, both items are set by default to flex-shrink: 1 and min-height: auto. I verified this using dev tools. Everything looks good so far; all settings are in compliance with the spec.

Here's where the discrepancy begins: The #tall item is set to height: 300%. This item is much taller than the container. However, with flex-shrink: 1 there can be no overflow. All items with a non-zero flex-shrink must reduce their size to prevent themselves and their siblings from overflowing the container (assuming the size of the content allows this). But with min-height: auto, the items cannot reduce their size below the height of their content.

All this works in Firefox. But why not in Chrome? Why is the .navbar item, which is being squeezed by #tall, shrinking below the size of its content (the button) in Chrome?

---

Firefox

As stated above, the #tall element, with a height: 300%, cannot overflow the container because of flex-shrink. Its sibling, the .navbar item, must also shrink because of flex-shrink. However, it cannot shrink below the size of its content because of min-height: auto. All good. Everything complies with the spec.

---

Chrome

Like in Firefox, the #tall element, with a height: 300%, cannot overflow the container because of flex-shrink. Its sibling, the .navbar item, must also shrink because of flex-shrink. However, it should not shrink below the size of its content because of min-height: auto, but it does anyway. Why?

---

Interventions

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

source: https://github.com/WICG/interventions

From 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 intervention.) As a result, many people are seeing their layout (especially desired scrollbars) work as expected in Chrome, but not in Firefox / Edge.

So, as stated in the beginning of this answer, the problem you're encountering is probably not a bug, but a deliberate deviation from the spec. It would be Firefox that is in full compliance with the spec.

---

Important Notes

It's important to note that I have no direct knowledge of the internal workings of Chrome, Firefox or any other browsers. I only believe Chrome is applying a min-height intervention based on my personal observations. It's a theory. More like an extrapolation. There is a possibility that I am not entirely (or even remotely?) correct. Chrome could be fiddling with min-height, flex-shrink and/or other properties. I don't know for sure.

It's also important to note that, because this behavior is not in accordance with the spec, it may not be reliable and can change at any time.

这篇关于Firefox 和 Chrome 之间的 flex-shrink 差异的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！