<div> background got cut

Question

I wanna highlight some lines in a <div>.
Some lines are longer than the width of the <div>, so I use <div style="overflow:scroll;">.
However, when I scroll to the right, the highlighted background is cut at the right edge, so text longer than the <div>'s width has no background.

<style>
.a { background-color:red; }
.b { background-color:yellow; }
</style>
<div style="overflow:scroll;width:49%;height:100%;border:1px solid silver;white-space:nowrap;">
<pre>
<div class="a">ffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff
dffdgfdsgfg</div>
<div class="b">asdsad</div>
</pre>
</div>

Can anyone fix this?

Answer 1

remove white-space:nowrap;

and add word-wrap: break-word;