title: How to make div's width to expand within scrollable content
body: <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>