继续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),就像表格一样(当他们的孩子比桌子宽时).设置flex在div儿童填充可用空间,因为所有的孩子都应该是平等的宽度.