Win8.1 + Firefoxで縦横のスクロールバーが同時に表示されない時の解決方法 #CSS

Win8.1 + Firefoxでの対処法です。

概要

極狭い範囲でこんな表示をしたい時、片方のスクロールバーしか表示されない時がある

解決策

width, heightにそれぞれ51px以上を指定してあげる

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>sample</title>
  <style>
    .box {
      /*ここ*/
      width: 51px;
      height: 51px;
      overflow: auto;
      background-color: #ddd;
      word-break: keep-all;
    }
  </style>
</head>
<body>
  <div class="box">
    <span>contentcontentcontentcontentcontentcontentcontent</span>
    <span>コンテンツコンテンツコンテンツコンテンツコンテンツ</span>
    <span>contentcontentcontentcontentcontentcontentcontent</span>
    <span>コンテンツコンテンツコンテンツコンテンツコンテンツ</span>
    <span>contentcontentcontentcontentcontentcontentcontent</span>
    <span>コンテンツコンテンツコンテンツコンテンツコンテンツ</span>
    <span>contentcontentcontentcontentcontentcontentcontent</span>
    <span>コンテンツコンテンツコンテンツコンテンツコンテンツ</span>
  </div>
</body>
</html>

参考

境界値での挙動

/* パターン1 横のバーのみ表示される */
.box {
  width: 50px;
  height: 50px;
}

/* パターン2 横のバーのみ表示される */
.box {
  width: 51px;
  height: 50px;
}

/* パターン3 縦のバーのみ表示される */
.box {
  width: 50px;
  height: 51px;
}

各最新ブラウザでの動作

一応2015/7/14時点の各最新ブラウザでの動作

OS	ブラウザ	動作
OS X Yosemite	Chrome	正常
OS X Yosemite	Firefox	正常
OS X Yosemite	Safari	正常
Win 8.1	Chrome	正常
Win 8.1	Firefox	横バーのみ表示
Win 8.1	IE 11	正常