使用滚动条在容器div中时，div上的样式不会拉伸

Question

我试图创建一个容器div，里面有一系列样式的div。我希望容器是一个固定的宽度，并显示一个滚动条，如果任何包含的div比容器宽。我可以通过将容器设置为auto overflow-x和nowrap空格来实现这一点，但我似乎无法弄清楚如何在包含的元素上获取样式以进行拉伸。

以下是我正在做的事情

的一个例子

＆＃13;

＆＃13;

    <div style="width:200px;overflow-x:auto;white-space:nowrap">
    		<div style="background:#dddddd">AAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAA</div>
    		<div style="background:#aaaaaa">AAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAA</div>
    		<div style="background:#bbbbbb;">AAAAAAAAAAAAA   </div>
    </div>

＆＃13;

＆＃13;

＆＃13;

这就是我得到的

正如您所见，滚动条出现但各个div的样式不会拉伸。因此，当您向右滚动以显示其余内容时，背景将停止。

我尝试过宽度和边距，但似乎无法让风格延伸。

有什么想法吗？

Answer 1

如果你将display = table添加到内部div的样式中，那么它们的宽度足以容纳其中的文本数据。

在回复第一条评论时编辑：

你可以让它们像这样最长的div一样宽。

<div style="width:200px;overflow-x:auto;white-space:nowrap">
    <div style="display:table">
        <div style="background:#dddddd;display:table-row">AAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAA</div>
        <div style="background:#aaaaaa;display:table-row">AAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAA</div>
        <div style="background:#bbbbbb;display:table-row;">AAAAAAAAAAAAA   </div>
    </div>
</div>

Answer 2

您需要使用scroll：fiddle

为div中的div添加一些width

<div style="width:200px;overflow-x:scroll;white-space:nowrap">
        <div style="width: 2000px;background:#dddddd">AAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAA</div>
        <div style="width: 1000px; background:#aaaaaa">AAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAA</div>
        <div style="background:#bbbbbb;">AAAAAAAAAAAAA   </div>
</div>