title: Overflow with flex-basis and min and max-width
body: <p>My goal is to use flexbox to implement a slider that has a given width and can grow as items(images) are added into it, until a specific width is reached. After that width is reached i want to show a scrollbar on the x axis. I also want the slider not to shrink bellow the min-width.</p>
  
  <p>This is what i tried:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="wrapper"&gt;
    &lt;div class="thisDivAllowsSliderToGrowToMaxWidth"&gt;
      &lt;div class="slider"&gt;
        &lt;div class="image"&gt;&lt;/div&gt;
        ...
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.wrapper {
    height: 400px;
    display: flex;
    justify-content: center;
    align-items:center
  }
  
  .slider {
    display:flex;
    justify-content:flex-start;
    height:100px;
    flex-basis: 250px;
    min-width:200px;
    max-width:350px;
    overflow-x:auto;
  }
  
  .image {
    flex-shrink:0;
    height:100px;
    width:50px;
  }
  </code></pre>
  
  <p>The issue that pops out is that as soon as overflow-x is added to the slider, it does not grow anymore but shows the scrollbar as soon as flex-basis width is reached.</p>
  
  <p>Interestingly, adding a simple wrapping div (.thisDivAllowsSliderToGrowToMaxWidth) around the slider somehow fixes the issue. You can find the example <a href="https://jsbin.com/pusenorawi/edit?html,css,output" rel="nofollow noreferrer">here</a>. </p>
  
  <p>Can anyone answer why is this happening and am I using the flex properties as intended?</p>