Why does flex box work differently going from 2 columns to 3 than from 3 to 4?

Question

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.

.my-card-container {
    display: flex;
    flex-wrap: wrap;
}

.my-card {
    min-width: 250px;
    max-width: 375px;
    flex: 0 auto;
}

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...

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.

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.

Allowing us to reproduce the problem by posting all relevant code would be more useful than a textual description of the problem. — Michael Benjamin, Mar 29 '18 at 00:57
But it sounds like you may be encountering this problem: https://stackoverflow.com/a/37413580/3597276 — Michael Benjamin, Mar 29 '18 at 00:59
@Michael_B I don't see the similarity. How does the linked question explain why a 4th item doesn't fit on a row of more than `1000px` when the children have `min-width: 250px`? — tao, Mar 29 '18 at 01:26
I'll be able to give you a useful answer if / when I can see the code. @AndreiGheorghiu — Michael Benjamin, Mar 29 '18 at 01:28

tao · Answer 1 · 2018-03-29T01:37:10.833

flex: 0 auto gets parsed into

{
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
}

Even though flex-shrink allows it to shrink below it's normal width, it won't go below the value of min-width. This means that whenever the parent has a width of 1000px or larger, the 4th item will be rendered on first row, just as the 3rd makes it up at 750px.

Which means the parent's width is limited (by something) at a value between 750px (because it works from 2 to 3 items) and 1000px (because it doesn't work from 3 to 4.

If you can't find what is limiting the parent's width below 1000px alone (could be a rule set on itself or any of its parents), you need to add a mcve to your question, reproducing the issue and I'll help you find the cause.

Note: The behavior you are asking for works by default, using your provided code (I only added some rules for children to become visible - you obviously don't need them):

.my-card-container {
    display: flex;
    flex-wrap: wrap;
}

.my-card {
    min-width: 250px;
    max-width: 375px;
    flex: 0 auto;
}

.my-card {
  min-height: 200px;
  border: 1px solid #eee;
  box-sizing: border-box;
}

<div class="my-card-container">
  <div class="my-card"></div>
  <div class="my-card"></div>
  <div class="my-card"></div>
  <div class="my-card"></div>
  <div class="my-card"></div>
  <div class="my-card"></div>
  <div class="my-card"></div>
  <div class="my-card"></div>
  <div class="my-card"></div>
  <div class="my-card"></div>
  <div class="my-card"></div>
</div>

Why does flex box work differently going from 2 columns to 3 than from 3 to 4?

1 Answers1