領域からはみ出す場合に自動で縦スクロールバーを出したい

Question

前提・実現したいこと

あるdivの子要素の高さが動的に変わる部分があるのですが、画面に入り切らなくなった場合にのみスクロールバーを出したい。
そして、スクロールバーが表示される場合はスクロールバーの幅だけdivの幅を自動的に広げたい。

試したコード

https://codepen.io/takabosoft/pen/LYpKEjL

<div class="container">
  <div class="scroll">
    <div class="scrollitems"></div>
  </div>
</div>

* {
  box-sizing: border-box;
  overflow: hidden;
}

.container {
  border: 4px solid gray;
  display: flex;
  height: 300px;
}

.scroll {
  flex: 0 0 auto;
  border: 4px solid red;
  overflow-y: auto;
}

.scrollitems {
  width: 200px;
  height: 700px;
  border: 4px solid green;
}

試した結果

chromeでは期待通りに動きますが、firefoxでは幅が広がりません。
firefoxでもchromeのようにスクロールバーが自動で表示された時に幅も自動的に広げるようにする方法はあるでしょうか？

代替案

overflow-yをscrollにすると、firefoxでも幅が広がるので、
JavaScriptでdivの子要素の高さをどうにかして監視し、スクロールバーが必要になったらoverflow-yをscrollに、そうでない場合はhiddenに切り替えるという方法を考えました。

ただ、そこまでせずともCSS等で簡単に実現できる方法があればご教示をお願いいたします。

補足情報（FW/ツールのバージョンなど）

Firefox 76.0.1 (64 ビット)
Chrome 83.0.4103.61

Answer 1

Firefoxのバグの様ですね。
764076 - intrinsic width of "overflow:auto" element doesn't grow to accomodate its scrollbar
8年前にバグレポートがありますが、解決していないようです。

---

良い解決方法は思いつきませんでしたが、Firefoxのシェアは4%程度なので、CSSハックでFirefoxだけoverflow-y:scrollにして目をつぶる、というのもいいのではないかな、と思いました。

Comments

[takabosoft]

回答ありがとうございました。バグが8年放置はもう修正は期待できないと思いますので、おっしゃるような簡単な方法で対処したいと思います。