Continue div element past horizontal overflow

Question

A JSFiddle of it: http://jsfiddle.net/24tL8mkq/3/

I want the red highlighting to continue all the way across the box.

Right now, it's set-up such that:

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

with the relevant css (this is the CSS that I want to extend across the entire div, through the overflow) being:

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

I get that I can't use width: 100% as that'll only extend to the right most side of the overflow always, but I can't set a static width as I don't know what the size of the box could be.

I'd really prefer to keep this a HTML/CSS solution if possible just to make this as portable as possible.

Answer 1

Interesting problem. The following works for me in the latest Firefox, Chrome and IE11, though I'd consider this somewhat "experimental" - definitely should be further tested if you need to support a broader range of browsers.

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

pre {
    display: table;
}

pre > div { display: flex; }

I wish I could tell you why this works, but I don't know. I wasn't able to find another combination that works, however. My guess: setting the pre to display: table makes it so the width will go wider than 100% (500px), as tables will do (when their children are wider than the table). Setting flex on the div children is filling the available space since all the children should be equal width.