How to make div's width to expand within scrollable content
<p>A div's width is not expanding with the width of its parent container or its content. There are no floats involved. The parent div has <code>overflow:scroll</code> and <code>white-space:pre</code> set; all else is normal. Identical behavior observed in Firefox, IE/Edge, Opera, and Chrome.</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>div.wrapper {
  padding: 1em;
  width: 20em;
  background-color: rgb(240, 240, 240);
  overflow: scroll;
  white-space: pre;
  font-family: monospace;
}
div.line {
  background-color: rgb(200, 200, 200);
}
div.line span.blue {
  color: blue;
}
div.line span.green {
  color: green;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class='wrapper'&gt;
  &lt;div class='line'&gt;This text is too &lt;span class="blue"&gt;long&lt;/span&gt; for the wrapper div to &lt;span class="green"&gt;contain&lt;/span&gt;, so the scroll bar activates.&lt;/div&gt;
  &lt;div class='line'&gt;However, the line div's background color fails to &lt;span class="blue"&gt;expand&lt;/span&gt; with the longer contents, instead ending at the wrapper div's width. Why?&lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>The background color of <code>div.line</code> extends as far as <code>div.wrapper</code>'s width on the page. But, when the user scrolls right, the text appears as normal while the <code>div.line</code>'s background color ends.</p>

<p>What I need is for every <code>div.line</code> to be as wide as <code>div.wrapper</code>'s "inner" width (to fill the scrollable area).</p>

<p>Failed solutions:</p>

<ul>
<li><p>set <code>overflow:hidden</code> - this hides the overflowing content, instead of resizing the div</p></li>
<li><p>set <code>overflow:auto</code> - this makes no difference</p></li>
<li><p>add <code>&lt;div style="clear:both"&gt; &lt;/div&gt;</code> - makes no difference (no floats involved!)</p></li>
<li><p>set <code>after:...clear:both</code> - makes no difference, as above</p></li>
<li><p>set height on parent / child elements - makes no difference</p></li>
<li><p>set <code>width:auto</code> - made no difference</p></li>
</ul>

<p>I've researched this until my brain hurts. I really hope I'm missing something obvious.</p>