CSS Flex Items Refuses to Change Width

April 14, 2023

I have 5 flex items within a flex container:

<section class="dishesNewest">
    <div class="newDish">
      <a href="#"><img src=${e.image} alt="" class="newDishImg lazyLoad" /></a>
      <h1 class="newDishTitle">${e.title}</h1>
    </div>

    <div class="newDish">
      <a href="#"><img src=${e.image} alt="" class="newDishImg lazyLoad" /></a>
      <h1 class="newDishTitle">${e.title}</h1>
    </div>

    <div class="newDish">
      <a href="#"><img src=${e.image} alt="" class="newDishImg lazyLoad" /></a>
      <h1 class="newDishTitle">${e.title}</h1>
    </div>

    <div class="newDish">
      <a href="#"><img src=${e.image} alt="" class="newDishImg lazyLoad" /></a>
      <h1 class="newDishTitle">${e.title}</h1>
    </div>

    <div class="newDish">
      <a href="#"><img src=${e.image} alt="" class="newDishImg lazyLoad" /></a>
      <h1 class="newDishTitle">${e.title}</h1>
    </div>
</section>

styles.css

.dishesNewest {
  margin: 10rem auto 25rem auto;
  display: flex;
  padding: 0 5%;
  justify-content: center;
}

.newDish {
  display: flex;
  flex-direction: column;
  min-width: 150px;
  gap: 2rem 0;
  padding: 8px;
}

on a screen width of 800px i want to change the width of each item to something like 40% or 50% so it display as 2 divs per row :

@media only screen and (max-width: 800px) {

  .newDish {
    width: 45%
  }
}

but the flex item totally ignores both width and flex-basis, and it doesnt matter if using pixels, percentage or anything else it doesnt work, why is that happening?

>Solution :

The width declaration has no effect due to the fact that min-width takes precedence over the width declaration, and so the elements will be 150px width instead. You could override this by setting min-width: 0 in your media query:

.dishesNewest {
  margin: 10rem auto 25rem auto;
  display: flex;
  padding: 0 5%;
  justify-content: center;
}

.newDish {
  display: flex;
  flex-direction: column;
  min-width: 150px;
  gap: 2rem 0;
  padding: 8px;
}

@media only screen and (max-width: 800px) {
  .newDish {
    width: 45%;
    min-width: 0;
  }
}

<section class="dishesNewest">
    <div class="newDish">
      <a href="#"><img src=${e.image} alt="" class="newDishImg lazyLoad" /></a>
      <h1 class="newDishTitle">${e.title}</h1>
    </div>

    <div class="newDish">
      <a href="#"><img src=${e.image} alt="" class="newDishImg lazyLoad" /></a>
      <h1 class="newDishTitle">${e.title}</h1>
    </div>

    <div class="newDish">
      <a href="#"><img src=${e.image} alt="" class="newDishImg lazyLoad" /></a>
      <h1 class="newDishTitle">${e.title}</h1>
    </div>

    <div class="newDish">
      <a href="#"><img src=${e.image} alt="" class="newDishImg lazyLoad" /></a>
      <h1 class="newDishTitle">${e.title}</h1>
    </div>

    <div class="newDish">
      <a href="#"><img src=${e.image} alt="" class="newDishImg lazyLoad" /></a>
      <h1 class="newDishTitle">${e.title}</h1>
    </div>
</section>

Then, to display the elements as two per row, consider allowing the flex children to wrap by setting flex-wrap: wrap on the flex parent container:

.dishesNewest {
  margin: 10rem auto 25rem auto;
  display: flex;
  padding: 0 5%;
  justify-content: center;
  flex-wrap: wrap;
}

.newDish {
  display: flex;
  flex-direction: column;
  min-width: 150px;
  gap: 2rem 0;
  padding: 8px;
}

@media only screen and (max-width: 800px) {
  .newDish {
    width: 45%;
    min-width: 0;
  }
}

<section class="dishesNewest">
    <div class="newDish">
      <a href="#"><img src=${e.image} alt="" class="newDishImg lazyLoad" /></a>
      <h1 class="newDishTitle">${e.title}</h1>
    </div>

    <div class="newDish">
      <a href="#"><img src=${e.image} alt="" class="newDishImg lazyLoad" /></a>
      <h1 class="newDishTitle">${e.title}</h1>
    </div>

    <div class="newDish">
      <a href="#"><img src=${e.image} alt="" class="newDishImg lazyLoad" /></a>
      <h1 class="newDishTitle">${e.title}</h1>
    </div>

    <div class="newDish">
      <a href="#"><img src=${e.image} alt="" class="newDishImg lazyLoad" /></a>
      <h1 class="newDishTitle">${e.title}</h1>
    </div>

    <div class="newDish">
      <a href="#"><img src=${e.image} alt="" class="newDishImg lazyLoad" /></a>
      <h1 class="newDishTitle">${e.title}</h1>
    </div>
</section>