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

Question

.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 的宽度来容纳它，从而导致显示水平滚动条。

铬84

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

如何让 Firefox 像 Chrome 一样工作？

限制条件：

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

我尝试过的：

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

Answer 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>