title: Chrome does not expand flex parent according to children's content
body: <p>I need to display several boxes next to each other. Each box has a variable number of child items. The parent should expand according to the space that the child items are taking up. It is important that the items have fixed width. I'm using flexbox for layout. It should look like this:</p>
  
  <p><a href="https://i.stack.imgur.com/foBo1.png" rel="noreferrer"><img src="https://i.stack.imgur.com/foBo1.png" alt="enter image description here"></a></p>
  
  <p>I wrote a <a href="https://plnkr.co/edit/Vz3VO85wJ58KYODLbaGN?p=preview" rel="noreferrer">Plunkr</a> to illustrate.</p>
  
  <p>The problem: Chrome does not expand the parent when the children take up more space. The child items are displayed beyond the parents' boundaries and appear in a neighbouring parent, resulting in this mess:</p>
  
  <p><a href="https://i.stack.imgur.com/rEMbS.png" rel="noreferrer"><img src="https://i.stack.imgur.com/rEMbS.png" alt="enter image description here"></a></p>
  
  <p>Ironically, if you open the Plunkr in IE 11 or Edge, it works fine.</p>
  
  <p>What am I doing wrong?</p>
  
  <p>Here's a code snippet:</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>body {
    display: flex;
    overflow: scroll;
  }
  
  .parent {
    border: 1px solid grey;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
  }
  
  .items {
    display: flex;
  }
  
  .items span {
    flex-basis: 25px;
    flex-shrink: 0;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="parent"&gt;
    &lt;h4&gt;Parent 1&lt;/h4&gt;
    &lt;div class="items"&gt;
      &lt;span&gt;i1&lt;/span&gt;
      &lt;span&gt;i2&lt;/span&gt;
      &lt;span&gt;i3&lt;/span&gt;
      &lt;span&gt;i4&lt;/span&gt;
      &lt;span&gt;i5&lt;/span&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="parent"&gt;
    &lt;h4&gt;Parent 2&lt;/h4&gt;
    &lt;div class="items"&gt;
      &lt;span&gt;i1&lt;/span&gt;
      &lt;span&gt;i2&lt;/span&gt;
      &lt;span&gt;i3&lt;/span&gt;
      &lt;span&gt;i4&lt;/span&gt;
      &lt;span&gt;i5&lt;/span&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="parent"&gt;
    &lt;h4&gt;Parent 3&lt;/h4&gt;
    &lt;div class="items"&gt;
      &lt;span&gt;i1&lt;/span&gt;
      &lt;span&gt;i2&lt;/span&gt;
      &lt;span&gt;i3&lt;/span&gt;
      &lt;span&gt;i4&lt;/span&gt;
      &lt;span&gt;i5&lt;/span&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="parent"&gt;
    &lt;h4&gt;Parent 4&lt;/h4&gt;
    &lt;div class="items"&gt;
      &lt;span&gt;i1&lt;/span&gt;
      &lt;span&gt;i2&lt;/span&gt;
      &lt;span&gt;i3&lt;/span&gt;
      &lt;span&gt;i4&lt;/span&gt;
      &lt;span&gt;i5&lt;/span&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="parent"&gt;
    &lt;h4&gt;Parent 5&lt;/h4&gt;
    &lt;div class="items"&gt;
      &lt;span&gt;i1&lt;/span&gt;
      &lt;span&gt;i2&lt;/span&gt;
      &lt;span&gt;i3&lt;/span&gt;
      &lt;span&gt;i4&lt;/span&gt;
      &lt;span&gt;i5&lt;/span&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="parent"&gt;
    &lt;h4&gt;Parent 6&lt;/h4&gt;
    &lt;div class="items"&gt;
      &lt;span&gt;i1&lt;/span&gt;
      &lt;span&gt;i2&lt;/span&gt;
      &lt;span&gt;i3&lt;/span&gt;
      &lt;span&gt;i4&lt;/span&gt;
      &lt;span&gt;i5&lt;/span&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>