CSS Flex Items Refuses to Change Width - Html

aasemshoshari
April 14, 2023
142 views
0 votes
2 Answers

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?

Answers

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>

You can use flex-wrap in .dishesNewest along with that rule for 800px. If flex-wrap is not set in the flex container it will never wrap.
When 2 containers cannot fit in the same row because of the min-with (150px) they will break in just one column

(I’ve added colors for visibility purposes)

.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) {
  .dishesNewest {
   flex-wrap: wrap;
  }
  .newDish {
    width: 45%
  }
}

/* debugging/display containers */
.newDish{
  border: 1px solid red;
}
.newDish a{
 border: 1px solid blue;
}
.newDish h1{
 border: 1px solid green;
}

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

Please signup or login to give your own answer.

Click here to cancel reply.

CSS Flex Items Refuses to Change Width – Html

Answers