Html 如何让'overflow-x'处理多个包含的浮动div？

如何使用

overflow:scroll获得
div
或
溢出：自动
滚动多个包含的
div
s

如果我有一个
div
，有一个子
div
，并且子
div
比容器宽，则
溢出：滚动非常有效


div.container{
溢出-x：滚动；
宽度：150px；
边框：1px纯黑；
}
第2分部{
宽度：300px；
浮动：左；
}

ABCD1234WXYZ ABCD1234WXYZ
我想我已经实现了您在这里想要的（注意，我只将我的更改应用于您的顶级示例）：


需要注意的关键事项是：

我添加了一个带有
class=“internal container”
的内部包装元素，即
display:table row
类
internal
的元素现在具有
display:table cell
也可以使用dispaly:inline块设置样式并将该样式应用于所有子div
e、 g



注意：我使用内联样式进行解释
你可以试着用更少的代码来编码，这样你就可以把你的身高作为一个单一的变量来计算，这样你就可以在以后使用它，而不需要浮点数
div.inner{display:table cell；}
将提供您想要的：


div.inner{
宽度：100px；
显示：表格单元格；
}
分区集装箱{
溢出-x：滚动；
宽度：150px；
边框：1px纯黑；
}

ABCD
1234
WXYZ
所以我喜欢它，但问题是我事先不知道它的高度。这也需要是动态的。@deitch没有说这是必要的，但javascript是一个选项吗？当然是。实际上，在用户拖动以调整大小的
div
s（仅窄
div
s）之间有分隔符。。。因此很头痛。哦，我想我得到了一些东西。@deitch看到我更新的小提琴在上面^。但是“公鸡”在上面。谢谢。我很抱歉，我没有得到你想要达到的目标，只是看看JSFIDLE，我觉得你已经达到了你想要达到的目标
<div style="width:300px; overflow-x:scroll; height:auto;">
  <div class="box" style="width:100px; height:200px; display:inline-block;">
  </div>
  <div class="box" style="width:100px; height:200px; display:inline-block;">
  </div>
  <div class="box" style="width:100px; height:200px; display:inline-block;">
  </div>
  <div class="box" style="width:100px; height:200px; display:inline-block;">
  </div>
  <div class="box" style="width:100px; height:200px; display:inline-block;">
  </div>
  <div class="box" style="width:100px; height:200px; display:inline-block;">
  </div>
  <div class="box" style="width:100px; height:200px; display:inline-block;">
  </div>
</div>