div 上的样式在带有滚动条的容器 div 中时不拉伸

Question

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

这是我正在做的一个例子

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

这就是我得到的

如您所见，出现了滚动条，但 individual divs 的样式没有拉伸。因此，当您向右滚动以显示其余内容时，背景停止。

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

有什么想法吗？

Answer 1

您需要使用滚动在 div 内添加一些 width 到 divs：fiddle

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

Answer 2

如果您将 ;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>

div 上的样式在带有滚动条的容器 div 中时不拉伸

Styles on divs not stretching when in container div with scrollbar

html

css

overflow