Question

它的一个JSFiddle：http://jsfiddle.net/24tL8mkq/3/

我希望红色突出显示在整个方框中继续。

现在，它的设置使得：

<div style='width: 500px; overflow: auto; border: 1px solid black; padding-top:-5px;'>
    <pre id='pre_1'>
        <!-- code box -->
    </pre>
</div>

使用相关的css（这是我希望通过溢出扩展整个div的CSS）：

.bad {
    background-color: palevioletred;
    width: 100%;
}

我知道我无法使用width: 100%，因为它只会延伸到溢出的最右侧，但是我无法设置静态宽度＃39;不知道盒子的大小。

如果可能的话，我真的更喜欢保留这个HTML / CSS解决方案，以使其尽可能便携。

Answer 1

有趣的问题。以下适用于我最新的Firefox，Chrome和IE11，虽然我认为这有点“实验性” - 如果你需要支持更广泛的浏览器，肯定应该进一步测试。

http://jsfiddle.net/24tL8mkq/5/

pre {
    display: table;
}

pre > div { display: flex; }

我希望我能告诉你为什么会这样，但我不知道。然而，我无法找到另一种有效的组合。我的猜测：将pre设置为display: table会使宽度超过100％（500px），就像表格一样（当他们的孩子比桌子宽时）。在flex个孩子上设置div正在填补可用空间，因为所有孩子的宽度应该相等。

继续div元素超过水平溢出

1 个答案: