CODEWITHSUNDEEP
cssflexbox
Dan
Dan

Reputation: 1596

Make flexbox prioritise showing more items over the max-width of item

I have a row of boxes with a min/max width of 300/400px per box. I want flexbox to show more boxes per row when it can. At widths where it can't fit an equal amount of 300px boxes horizontally then it should show larger 400px boxes to fill the remaining space.

On this example, at a browser width of 929px it shows two 300px boxes where ideally it can fit and should show two 400px boxes

.container {
  display: flex;
  flex-wrap: wrap;

  width: 100%;
  height: 100%;
  max-width: 1260px;

  margin-right: auto;
  margin-left: auto;
  padding: 5px;
}

.card {
  flex: 0 1 300px;
  width: 100%;
  min-width: 300px;
  max-width: 400px;

  margin: 5px;
  overflow: hidden;

  background-color: grey;  
}

.profile {
  width: 100%;
  min-width: 300px;
}
<div class="container">
  <div class="card">
    <img class="profile" src="http://placehold.it/400x400">
    <p>Some Text</p>
  </div>
</div>

View CodePen

Upvotes: 2

Views: 270

Answers (1)

Ajedi32
Ajedi32

Reputation: 48418

The problem is this line:

flex: 0 1 300px;

You have flex-grow set to 0, so the boxes won't grow to fit the available space.

Change that line to this:

flex: 1 1 300px;

And your code works as expected. (View CodePen)

Upvotes: 1

Related Questions