html - 在带有滚动条的容器 div 中时，div 上的样式不拉伸(stretch)

Question

我正在尝试创建一个容器 div，其中包含一系列样式化的 div。我希望容器具有固定宽度，并在任何包含的 div 比容器宽时显示滚动条。我可以通过将容器设置为 auto overflow-x 和 nowrap whitespace 来做到这一点，但我似乎无法弄清楚如何让包含的元素上的样式拉伸(stretch)。

这是我正在做的一个例子

    <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>

这是我得到的

如您所见，出现了滚动条，但各个 div 的样式并未拉伸(stretch)。因此，当您向右滚动以显示其余内容时，背景停止。

我试过调整宽度和边距，但似乎无法拉伸(stretch)样式。

有什么想法吗？

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>