title: Display: Flex loses right padding when overflowing?
body: <p>I have an issue with a CSS3 flexbox.</p>
  
  <p>If I set the flexbox element to <code>overflow</code> and set a <code>min-width</code> value for the children, the right padding on the parent is lost? This is consistent on all supporting browsers.</p>
  
  <p>Here is an example of the error. If you scroll to the right of the container you will see the last child is hard up against the right edge of the container instead of honoring the padding value.</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>.outer {
      display: flex;
      flex-direction: row;
      width: 300px;
      height: 80px;
      border:1px #ccc solid;
      overflow-x: auto;
      padding: 5px;
  }
  .outer &gt; div {
      flex: 1 1 auto;
      border: 1px #ccc solid;
      text-align: center;
      min-width: 50px;
      margin: 5px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="outer"&gt;
      &lt;div&gt;text1&lt;/div&gt;
      &lt;div&gt;text2&lt;/div&gt;
      &lt;div&gt;text3&lt;/div&gt;
      &lt;div&gt;text4&lt;/div&gt;
      &lt;div&gt;text5&lt;/div&gt;
      &lt;div&gt;text6&lt;/div&gt;
      &lt;div&gt;text7&lt;/div&gt;
      &lt;div&gt;text8&lt;/div&gt;
      &lt;div&gt;text9&lt;/div&gt;
      &lt;div&gt;text10&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Does anyone know why this is and how I would go about correcting it? I've messed around with <code>padding</code> and <code>margin</code> values in different combinations without success.</p>