使用translate时，容器的宽度很奇怪

Question

我想显示一个容器，里面有一些页面浮动。有时候左边的某些页面应该被隐藏。如果页面的宽度太大，我想显示一个滚动条。

#wrapper{
    width: 200px;
    height: 100%;
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;
}

#container{
    width: 300px;
    transform: translate(-100px, 0);
}

.page{
    width: 100px;
    float: left;
    box-sizing: border-box;
    border: 1px solid black;
}

<div id="wrapper">
    <div id="container">
        <div class="page">1</div>
        <div class="page">2</div>
        <div class="page">3</div>
    </div>
</div>

如您所见，容器的宽度设置为300px，因为它包含3页100px。现在，您可以向右滚动100px而不会看到任何内容。当我将容器的宽度设置为200px时，它只显示1个条目。

当我不需要时，我可以以某种方式摆脱滚动条吗？