Flex Box with Gap created by Gutter Not Working as Expected

Question

I am trying to use a flex box to create a card layout with three columns in each row, like this:

I am using a flex box and the Gap property, however, the gap is causing my cards to wrap. Here is my code:

.stack-container
{
  max-width: 1500px;
  margin: auto;
}

.stack
{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5px;
}

.stack-item
{
  flex-basis: calc(33.333333%);
  background: red;
}

<html>
    <head>
        <meta name="viewport" content="width=device-width, maximum-scale=1, initial-scale=1, user-scalable=no" />
    </head>
    <body>
        <div class="stack-container">
        <div class="stack">
            <div class="stack-item">Lorem ipsum sds Lorem ipsum sdsLorem ipsum sdsLorem ipsum sdsLorem ipsum sdsLorem ipsum sdsLorem ipsum sds.Lorem ipsum sds Lorem ipsum sdsLorem ipsum sdsLorem ipsum sdsLorem ipsum sdsLorem ipsum sdsLorem ipsum sds.Lorem ipsum sds Lorem ipsum sdsLorem ipsum sdsLorem ipsum sdsLorem ipsum sdsLorem ipsum sdsLorem ipsum sds.</div>
            <div class="stack-item">Lorem ipsum sds Lorem ipsum sdsLorem ipsum sdsLorem.</div>
            <div class="stack-item">Lorem ipsum sds Lorem ipsum sdsLorem ipsum sdsLorem ipsum sdsLorem ipsum sdsLorem ipsum sdsLorem ipsum sds.</div>
        </div>
        </div>
    </body>
</html>

If I remove the gap property, it works as expected (albeit without a gap). Also, if I change the flex-basis to calc(33.333333% - 4px) it starts working - but anything less causes it to wrap.

What am I missing?

you have your answer: you need to reduce the gap from the flex-basis to achieve a total of 100% (gap + flex-basis) — Temani Afif, Aug 27 '21 at 14:03
you have 2 gaps and 3 elements so 2*gaps/3 need to be reduced for each element — Temani Afif, Aug 27 '21 at 19:10

Flex Box with Gap created by Gutter Not Working as Expected

0 Answers0