Question

我正在尝试向现有的非固定大小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拉伸适合。我希望外部div不要调整大小（相反，如果内部div不存在则保持其大小），而是让内部div显示水平滚动条。

如果可以知道外部div应该有多大，并且将内部div width限制为那个，那么这很容易做到，但是在这里我想做外{ {1}}的尺寸标准为“使用适合所有内部元素的宽度，除了宽内div ”。

为了做到这一点，我的猜测是内部div需要忽略外部的大小计算仅宽度，而不是高度，这就是我的意思不知道该怎么做。我尝试了一些事情：

将外部div的{{1}}设置为div，然后将内部的position设置为relative。这适用于外部absolute不再被内部拉伸的程度，但水平滚动条不会出现，它的位置是从外部div的左上角开始的0,0，并且它重叠了一些外部div的内容
使内部div浮动，并将其包裹在两个div元素之间，如下所示，这仍然会导致外部元素拉伸：

clear: both

<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，min-content，fit-content）的某些Mozilla供应商前缀，但它们似乎都没有我想要的效果

简而言之，我希望效果与上面的HTML代码列表非常相似，但是此页面通过在问题容器上设置固定宽度来实现。这样的事情有可能吗？

Answer 1

在没有设置固定宽度的情况下，我能想到的唯一方法就是这样做：

http://jsfiddle.net/pgRd5/

将内部div宽度设置为0，并强制溢出可见。然后在外部div设置溢出到auto，滚动条将出现在外部div上。如果你想要内部div上的滚动条，那么你就不幸了。

这不是世界上最好的解决方案，因此我建议您设置侧边栏以获得最大宽度属性，例如this example。

Answer 2

正如我在评论中所说，如果不实际指定该限制，则无法限制宽度。您是否有任何关于页面上列的大小的指南，例如百分比或设置主列宽度？否则页面不知道要为每列分配多少空间，并且页面的外观将是不可预测的。

我收集了您不想设置宽度的原因，因此您可以使用屏幕的完整可用宽度。因此，我建议您使用百分比，例如右侧30％的侧栏。这提供了可预测的布局，并且还允许您在内部内容上实现所需的滚动条，因为您已在外部div上指定了限制。 e.g。

<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：将宽元素放入div而不拉伸它

2 个答案: