Проблема с горизонтальной прокруткой в ​​Firefox

body {
  margin: 0;
  font-family: Georgia;
}

#container .box {
  width: 100vw;
  height: 100vh;
  display: inline-block;
  position: relative;
}

#container .box>div {
  width: 100px;
  height: 100px;
  font-size: 96px;
  color: #FFF;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -50px 0 0 -50px;
  line-height: .7;
  font-weight: bold;
}

#container {
  overflow-y: scroll;
  overflow-x: hidden;
  transform: rotate(270deg) translateX(-100%);
  transform-origin: top left;
  background-color: #999;
  position: absolute;
  width: 100vh;
  height: 100vw;
}

#container2 {
  transform: rotate(90deg) translateY(-100vh);
  transform-origin: top left;
  white-space: nowrap;
  font-size: 0;
}

.one {
  background-color: #45CCFF;
}

.two {
  background-color: #49E83E;
}

.three {
  background-color: #EDDE05;
}

.four {
  background-color: #E84B30;
}

<div id = "container">
  <div id = "container2">
    <div class = "box one">
      <div>1</div>
    </div>
    <div class = "box two">
      <div>2</div>
    </div>
    <div class = "box three">
      <div>3</div>
    </div>
    <div class = "box four">
      <div>Last</div>
    </div>
  </div>
</div>