title: Why does flex box work differently going from 2 columns to 3 than from 3 to 4?
body: <p>I'm working on an app that displays a variable number of cards to the user in a grid. I have both a max and a min width (375px and 250px) set on the divs that define the cards and the cards are in a flex container.</p>
  
  <pre><code>.my-card-container {
      display: flex;
      flex-wrap: wrap;
  }
  
  .my-card {
      min-width: 250px;
      max-width: 375px;
      flex: 0 auto;
  }
  </code></pre>
  
  <p>When there is a single column, the cards grow to 350px and stop. When the screen is above 500px wide, the cards shrink to 250px and there are two columns. The same is true going from 2 to 3 columns, that the two columns expand until the screen is 750px wide and then drop down to 250px each with a third column. But then...</p>
  
  <p>Once there are three columns, the columns will all expand to 350px and then leave white space off to the right side. The cards never shrink back down to accommodate more cards. There remain 3 columns until there is enough space for a 4th 350px column and then the same on to the 5th column.</p>
  
  <p>I want the behavior I see in the first two transitions that favors the highest number of cards across the screen at a given screen width, but I can't figure out what would be different when I am going from 3 columns to 4.</p>