Firefox 在计算父 div 大小时不考虑垂直滚动条宽度答案

【问题标题】：Firefox does not take vertical scrollbar width into account when calculating parent div sizeFirefox 在计算父 div 大小时不考虑垂直滚动条宽度
【发布时间】：2020-11-26 09:42:33
【问题描述】：

.scroll {
  position: absolute;
  left: 0;
  top: 0;
  background: yellow;
  overflow: auto;
  max-height: 100px;
}

<div class="scroll">
  <div>123456789</div>
  <div>123456789</div>
  <div>123456789</div>
  <div>123456789</div>
  <div>123456789</div>
  <div>123456789</div>
  <div>123456789</div>
</div>

火狐79

当 div 的高度溢出时，Firefox 会显示一个垂直滚动条，而不会增加 div 的宽度来适应它，从而导致显示一个水平滚动条。

Chrome 84

Chrome 按预期增加了 div 的宽度，并且没有显示水平滚动条。

如何让 Firefox 像 Chrome 一样工作？

约束：

scroll div 的宽度需要与其内容相匹配。
需要自动溢出。

我尝试过的：

min-width: 0/auto
Flexbox（获取自动宽度）
额外包装 div 的各种组合

【问题讨论】：

我的 chrome 84 没有给出你显示的结果
嗯，我可以确认 Chrome 的尺寸也有点偏差。如果您在开发工具中切换position: absolute 样式，它会“修复”自身，这告诉我这可能是一个浏览器错误。但我以前没有经历过。

标签： html css firefox

【解决方案1】：

.scroll {
    position: absolute;
    left: 0;
    top: 0;
    display:block;
    background: yellow;
        
    max-height: 100px;
    max-width:auto;
    overflow-y:auto;
    padding-right:18px;
 }

<div class="scroll">
  <div>123456789</div>
  <div>123456789</div>
  <div>123456789</div>
  <div>123456789</div>
  <div>123456789</div>
  <div>123456789</div>
  <div>123456789</div>
</div>

【讨论】：

谢谢，但即使没有显示垂直滚动条，padding-right: 18px 也会适用。

【解决方案2】：

尝试使用：

width: fit-content;

或

width: min-content;

或

width: max-content;

【讨论】：