我正在尝试向现有的非固定大小 div 添加一个非常宽的 div。这是一个最小的示例 ( jsfiddle ):
<html>
<head/>
<body>
<div style="float: right; border: 1px solid green;">
Some content
<div id="problematic-div" style="border: 1px solid red; overflow: auto;">
This_is_a_very_long_unbreakable_string_but_I_don't_want_it_to_have_the_ability_to_stretch_the_div<br/>
It_should_have_a_horizontal_scrollbar_instead
</div>
Some content here too
</div>
Main content goes here
</body>
</html>
发生的事情是，较大的内部 div 使外部 div 拉伸(stretch)以适合。我希望外部 div 不调整大小(相反，保持内部 div 不存在时的大小)，而是让内部 div 显示水平滚动条。
如果可以知道外部 div 应该有多大，并将内部 div 的 width 限制为该大小，那么这很容易做到，但在这里我会喜欢将外部 div 的大小标准设置为“使用适合所有内部元素的任何宽度，除了较宽的内部 div”。
为了做到这一点，我的猜测是内部 div 需要从外部的尺寸计算中忽略仅宽度，而不是高度，这就是我不知道该怎么做。我已经尝试了一些事情:
- 将外部
div的position设置为relative，然后将内部的设置为absolute。这在一定程度上起作用，即外部div不再被内部拉伸(stretch)，但是水平滚动条没有出现，它的位置是从外部的左上角开始的 0,0 div，它与外部div的一些内容重叠 - 使内部
divfloat ，并将其包裹在两个clear: both元素之间，如下所示，这仍然会导致外部元素拉伸(stretch):
.
<div style="clear: both;"></div>
<div id="problematic-div" style="border: 1px solid red; float: left; overflow: auto;">
This_is_a_very_long_unbreakable_string_but_I_don't_want_it_to_have_the_ability_to_stretch_the_div<br/>
It_should_have_a_horizontal_scrollbar_instead
</div>
<div style="clear: both;"></div>
Some content here too
width的某些 Mozilla 供应商前缀(min-content、fit-content、available)，但是它们似乎都没有达到我想要的效果
简而言之，我想要的效果很像上面在这个页面上列出的 HTML 代码，但是这个页面通过在问题容器上设置固定宽度来实现它。这样的事情可能吗？
最佳答案
正如我在评论中所说，如果不实际指定限制，就不可能限制宽度。 您是否有关于页面上列大小的任何指南，例如百分比或设置主列宽度？否则页面不知道为每一列分配多少空间，页面的外观将无法预测。
我认为您不想设置宽度的原因是您可以使用屏幕的全部可用宽度。因此，我建议您使用百分比，例如右侧边栏的 30%。这提供了一个可预测的布局，并且还允许您在内部内容上实现所需的滚动条，因为您已经指定了外部 div 的限制。例如
<div style="float: right; width:50%">
Some content
<div id="problematic-div" style="overflow-x: scroll; width: 100%;">
This_is_a_very_long_unbreakable_string_but_I_don't_want_it_to_have_the_ability_to_stretch_the_div<br/>
It_should_have_a_horizontal_scrollbar_instead
</div>
Some content here too
</div>
您需要测试该跨浏览器，但它应该适用于大多数浏览器)
关于CSS:在不拉伸(stretch)的情况下将宽元素放入 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10576662/