html - 继续 div 元素越过水平溢出

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% 因为它总是只会延伸到溢出的最右边，但我不能设置静态宽度，因为我不这样做'知道盒子的尺寸是多少。

如果可能的话，我真的更愿意将其保留为 HTML/CSS 解决方案，只是为了使其尽可能可移植。

Answer 1

有趣的问题。以下适用于最新的 Firefox、Chrome 和 IE11，尽管我认为这有点“实验性”——如果您需要支持更广泛的浏览器，绝对应该进一步测试。

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

pre {
    display: table;
}

pre > div { display: flex; }

我希望我能告诉你为什么这有效，但我不知道。但是，我找不到另一种有效的组合。我的猜测:将 pre 设置为 display: table 可以使宽度大于 100% (500px)，就像表格一样(当它们的子项宽度大于 table )。在 div 子级上设置 flex 会填充可用空间，因为所有子级都应该等宽。