容器扩展其内容的宽度。将垂直滚动条放在外面，而不是在里面

Question

以下是example

我希望容器扩展其内容的宽度。同时，它的高度是固定的。如果垂直溢出，则应该有一个垂直滚动条。

现在，overflow:auto以某种方式使滚动条在容器内，覆盖内容。那不是我想要的。

如果我使用overflow:scroll，滚动条将在外面，但即使没有溢出也会一直存在。

我如何解决这里的困境？在Windows上测试，Chrome的最新版本。

Answer 1

将position:relative;添加到.container1课程。有2个div容器

Pen

Answer 2

好吧看起来并不那么困难。 您是否尝试将 width 设置为 auto ？

尝试使用以下 CSS ;它将根据您的需要输出相同的结果。

.container {
    float: left;
    height: 50px;
    width: auto;
    overflow-y: scroll;
}

将宽度设置为自动会使div根据其内容进行扩展，并且不会有任何水平滚动条。 然后设置只有overflow-y滚动将只给你垂直滚动条。

希望有助于......