title: Extend background on scrolled flexbox container
body: <p>How can I extend the background to the right using flexbox and a container with limited width?</p>
  
  <p>The spans are the tags that must contain a background-color, not the parent tags. (Because the color can be different for each span)</p>
  
  <p>I know that display <code>table</code> and <code>table-row</code> fixes it, but it gives me another problems with paddings and borders, so I would like to use <code>flexbox</code> model.</p>
  
  <p>There is another requeriment, the background should extend to the widest span, so all spans should have the same width and extend the background to the same position.</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>pre {
    width: 300px;
  }
  
  code {
    display: flex;
    flex-direction: column;
    overflow: auto;
  }
  
  span {
    background-color: #ddd;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;pre&gt;
    &lt;code&gt;
      &lt;span&gt;sadfasdsad asd adsads  das ads dasdasdas  dasd as das&lt;/span&gt;
      &lt;span&gt;sadfdas das adsdsad sa dasda s adsasdsad asd adsads  das ads dasdas&lt;/span&gt;
    &lt;/code&gt;
  &lt;/pre&gt;</code></pre>
  </div>
  </div>
  </p>