title: overflow-x children element width
body: <p>I have a div with overflow-x auto.
  This div has children which are wider than the parent div, causing a scroll.</p>
  
  <p>The inner children are given a border and background color which I would like to stretch across the entire width of them - including the scrolled overflow.
  The actual content of the inner children is dynamic - so I can't give them a set width.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.outer {
    border: 1px solid black;
    width: 100px;
    overflow-x: auto;
    white-space: nowrap;
  }
  
  .inner {
    border-bottom: 1px solid blue;
    background-color: red;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="outer"&gt;
    &lt;div class="inner"&gt;This is is row number 1&lt;/div&gt;
    &lt;div class="inner"&gt;This is is row number 2&lt;/div&gt;
    &lt;div class="inner"&gt;This is is row number 3&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The problem is that it doesn't - as can be seen in <a href="https://jsfiddle.net/sL0rkjgm/" rel="nofollow noreferrer">this fiddle</a>, the background and border only stretch to the defined width of the parent.</p>
  
  <p>How can I make the width of the children stretch to the entire scrolled area?</p>