Limit the number of column in a row with flexbox

August 1, 2022

For a project, I need to create the following element, everything is ok for me, I just have a little problem.

Indeed, when I tested the element on a bigger screen I saw that the number of column per row was not limited to three. In order to deal with that, I tried to use flex-basis: 33% and flex: 1 0 33% on .accommodation-nav and .accommodation-item but it doesn’t work.

Here is my code:

#acccommodation-city {
  flex-grow: 2;
  background-color: #F2F2F2;
  border: 1px solid #F2F2F2;
  border-radius: 10px;
  padding: 16px 0px px 16px;
  margin-right: 16px;
  margin-left: 16px;
}

#accommodation-nav {
  display: flex;
  flex-flow: row wrap;
}

#accommodation-nav>div {
  flex-basis: 33%;
}

.accommodation-item {
  background-color: white;
  border-radius: 10px;
  box-shadow: 10px 5px 5px #E0DDDD;
  margin-right: 10px;
  margin-left: 10px;
  margin-bottom: 10px;
  width: min-content;
  max-width: 180px;
  cursor: pointer;
}

.accommodation-item:hover,
.popular-item:hover {
  background-color: #DEEBFF;
}

.accommodation-picture {
  border: 3px solid white;
  border-radius: 10px 10px 0px 0px;
  box-sizing: border-box;
  width: 180px;
  height: 100px;
  object-fit: cover;
}

<link rel="stylesheet" href="https://fonts.googleapis.com/           
                             css?family=Raleway">
<script src="https://kit.fontawesome.com/                  
                     1f544e41e8.js" crossorigin="anonymous"></script>

<div id="acccommodation-city">
  <h3 class="title">Accommodations in Marseille</h3>
  <div id="accommodation-nav">
    <div class="accommodation-item">
      <img class="accommodation-picture" src="https://i.stack.imgur.com/tbRiY.jpg">
      <h5>Auberge la Cannebière</h5>
      <p>Night starting at <strong>25€</strong></p>
      <i style="color: #0065FC;" class="fa-solid fa-star fa-2xs"></i>
      <i style="color: #0065FC;" class="fa-solid fa-star fa-2xs"></i>
      <i style="color: #0065FC;" class="fa-solid fa-star fa-2xs"></i>
      <i style="color: #0065FC;" class="fa-solid fa-star fa-2xs"></i>
      <i style="color: #dfdddd;" class="fa-solid fa-star fa-2xs"></i>
    </div>
    <div class="accommodation-item">
      <img class="accommodation-picture" src="https://i.stack.imgur.com/nJ3Bf.jpg">
      <h5>Hôtel du port</h5>
      <p>Night starting at <strong>25€</strong></p>
      <i style="color: #0065FC;" class="fa-solid fa-star fa-2xs"></i>
      <i style="color: #0065FC;" class="fa-solid fa-star fa-2xs"></i>
      <i style="color: #0065FC;" class="fa-solid fa-star fa-2xs"></i>
      <i style="color: #0065FC;" class="fa-solid fa-star fa-2xs"></i>
      <i style="color: #0065FC;" class="fa-solid fa-star fa-2xs"></i>
    </div>
    <div class="accommodation-item">
      <img class="accommodation-picture" src="https://i.stack.imgur.com/FAKLO.jpg">
      <h5>Les mouettes Hotel</h5>
      <p>Night starting at <strong>76€</strong></p>
      <i style="color: #0065FC;" class="fa-solid fa-star fa-2xs"></i>
      <i style="color: #0065FC;" class="fa-solid fa-star fa-2xs"></i>
      <i style="color: #0065FC;" class="fa-solid fa-star fa-2xs"></i>
      <i style="color: #0065FC;" class="fa-solid fa-star fa-2xs"></i>
      <i style="color: #dfdddd;" class="fa-solid fa-star fa-2xs"></i>
    </div>
    <div class="accommodation-item">
      <img class="accommodation-picture" src="https://i.stack.imgur.com/Qo6xt.jpg">
      <h5>Hôtel de la mer</h5>
      <p>Night starting at <strong>46€</strong></p>
      <i style="color: #0065FC;" class="fa-solid fa-star fa-2xs"></i>
      <i style="color: #0065FC;" class="fa-solid fa-star fa-2xs"></i>
      <i style="color: #0065FC;" class="fa-solid fa-star fa-2xs"></i>
      <i style="color: #dfdddd;" class="fa-solid fa-star fa-2xs"></i>
      <i style="color: #dfdddd;" class="fa-solid fa-star fa-2xs"></i>
    </div>
    <div class="accommodation-item">
      <img class="accommodation-picture" src="https://i.stack.imgur.com/L9riT.jpg">
      <h5>Auberge Le Panier</h5>
      <p>Night starting at <strong>23€</strong></p>
      <i style="color: #0065FC;" class="fa-solid fa-star fa-2xs"></i>
      <i style="color: #0065FC;" class="fa-solid fa-star fa-2xs"></i>
      <i style="color: #0065FC;" class="fa-solid fa-star fa-2xs"></i>
      <i style="color: #0065FC;" class="fa-solid fa-star fa-2xs"></i>
      <i style="color: #dfdddd;" class="fa-solid fa-star fa-2xs"></i>
    </div>
    <div class="accommodation-item">
      <img class="accommodation-picture" src="https://i.stack.imgur.com/eYuCX.jpg">
      <h5>Hôtel chez Amina</h5>
      <p>Night starting at <strong>96€</strong></p>
      <i style="color: #0065FC;" class="fa-solid fa-star fa-2xs"></i>
      <i style="color: #0065FC;" class="fa-solid fa-star fa-2xs"></i>
      <i style="color: #0065FC;" class="fa-solid fa-star fa-2xs"></i>
      <i style="color: #0065FC;" class="fa-solid fa-star fa-2xs"></i>
      <i style="color: #0065FC;" class="fa-solid fa-star fa-2xs"></i>
    </div>
  </div>
  <h5 style="cursor: pointer;">Show more</h5>
</div>

I thank in advance anybody who will take the time to help me :D.

>Solution :

Like the comments already mentioned you would need to remove the max-width from your images and change up your width a little bit to account for your margins.

If you still want to limit your boxes to 180px i would recomment to instead limit the parent element to 3 * (box-width + margins) = 600px like this:

#acccommodation-city {
  flex-grow: 2;
  background-color: #F2F2F2;
  border: 1px solid #F2F2F2;
  border-radius: 10px;
  padding: 16px 0px px 16px;
  margin-right: 16px;
  margin-left: 16px;
}

#accommodation-nav {
  display: flex;
  flex-flow: row wrap;
  max-width:600px;
}

#accommodation-nav>div {
  flex-basis: calc(33% - 20px);
}

.accommodation-item {
  background-color: white;
  border-radius: 10px;
  box-shadow: 10px 5px 5px #E0DDDD;
  margin-right: 10px;
  margin-left: 10px;
  margin-bottom: 10px;
  width: min-content;
  cursor: pointer;
}

.accommodation-item:hover,
.popular-item:hover {
  background-color: #DEEBFF;
}

.accommodation-picture {
  border: 3px solid white;
  border-radius: 10px 10px 0px 0px;
  box-sizing: border-box;
  width: 180px;
  height: 100px;
  object-fit: cover;
}

<link rel="stylesheet" href="https://fonts.googleapis.com/           
                             css?family=Raleway">
<script src="https://kit.fontawesome.com/                  
                     1f544e41e8.js" crossorigin="anonymous"></script>

<div id="acccommodation-city">
  <h3 class="title">Accommodations in Marseille</h3>
  <div id="accommodation-nav">
    <div class="accommodation-item">
      <img class="accommodation-picture" src="https://i.stack.imgur.com/tbRiY.jpg">
      <h5>Auberge la Cannebière</h5>
      <p>Night starting at <strong>25€</strong></p>
      <i style="color: #0065FC;" class="fa-solid fa-star fa-2xs"></i>
      <i style="color: #0065FC;" class="fa-solid fa-star fa-2xs"></i>
      <i style="color: #0065FC;" class="fa-solid fa-star fa-2xs"></i>
      <i style="color: #0065FC;" class="fa-solid fa-star fa-2xs"></i>
      <i style="color: #dfdddd;" class="fa-solid fa-star fa-2xs"></i>
    </div>
    <div class="accommodation-item">
      <img class="accommodation-picture" src="https://i.stack.imgur.com/nJ3Bf.jpg">
      <h5>Hôtel du port</h5>
      <p>Night starting at <strong>25€</strong></p>
      <i style="color: #0065FC;" class="fa-solid fa-star fa-2xs"></i>
      <i style="color: #0065FC;" class="fa-solid fa-star fa-2xs"></i>
      <i style="color: #0065FC;" class="fa-solid fa-star fa-2xs"></i>
      <i style="color: #0065FC;" class="fa-solid fa-star fa-2xs"></i>
      <i style="color: #0065FC;" class="fa-solid fa-star fa-2xs"></i>
    </div>
    <div class="accommodation-item">
      <img class="accommodation-picture" src="https://i.stack.imgur.com/FAKLO.jpg">
      <h5>Les mouettes Hotel</h5>
      <p>Night starting at <strong>76€</strong></p>
      <i style="color: #0065FC;" class="fa-solid fa-star fa-2xs"></i>
      <i style="color: #0065FC;" class="fa-solid fa-star fa-2xs"></i>
      <i style="color: #0065FC;" class="fa-solid fa-star fa-2xs"></i>
      <i style="color: #0065FC;" class="fa-solid fa-star fa-2xs"></i>
      <i style="color: #dfdddd;" class="fa-solid fa-star fa-2xs"></i>
    </div>
    <div class="accommodation-item">
      <img class="accommodation-picture" src="https://i.stack.imgur.com/Qo6xt.jpg">
      <h5>Hôtel de la mer</h5>
      <p>Night starting at <strong>46€</strong></p>
      <i style="color: #0065FC;" class="fa-solid fa-star fa-2xs"></i>
      <i style="color: #0065FC;" class="fa-solid fa-star fa-2xs"></i>
      <i style="color: #0065FC;" class="fa-solid fa-star fa-2xs"></i>
      <i style="color: #dfdddd;" class="fa-solid fa-star fa-2xs"></i>
      <i style="color: #dfdddd;" class="fa-solid fa-star fa-2xs"></i>
    </div>
    <div class="accommodation-item">
      <img class="accommodation-picture" src="https://i.stack.imgur.com/L9riT.jpg">
      <h5>Auberge Le Panier</h5>
      <p>Night starting at <strong>23€</strong></p>
      <i style="color: #0065FC;" class="fa-solid fa-star fa-2xs"></i>
      <i style="color: #0065FC;" class="fa-solid fa-star fa-2xs"></i>
      <i style="color: #0065FC;" class="fa-solid fa-star fa-2xs"></i>
      <i style="color: #0065FC;" class="fa-solid fa-star fa-2xs"></i>
      <i style="color: #dfdddd;" class="fa-solid fa-star fa-2xs"></i>
    </div>
    <div class="accommodation-item">
      <img class="accommodation-picture" src="https://i.stack.imgur.com/eYuCX.jpg">
      <h5>Hôtel chez Amina</h5>
      <p>Night starting at <strong>96€</strong></p>
      <i style="color: #0065FC;" class="fa-solid fa-star fa-2xs"></i>
      <i style="color: #0065FC;" class="fa-solid fa-star fa-2xs"></i>
      <i style="color: #0065FC;" class="fa-solid fa-star fa-2xs"></i>
      <i style="color: #0065FC;" class="fa-solid fa-star fa-2xs"></i>
      <i style="color: #0065FC;" class="fa-solid fa-star fa-2xs"></i>
    </div>
  </div>
  <h5 style="cursor: pointer;">Show more</h5>
</div>