Flex-Basis for Wrapping Columns

Question

I have a pretty basic grid setup in flex, but I recently came across an oversight I made.

I have columns that have a margin-right: 3em and flex-basis: calc(33% - 3em).

My problem is that the 4th and 5th of these don't line up until there is a full "row" of 3.

Any insights as to why this is happening? I imagine I may be over-complicating things as per usual.

section {
  width: 1170px;
  margin: 0 auto;
  padding: 4em;
  background-color: lightgray;
}
.flex {
  display: flex;
}
.wrap {
  flex-wrap: wrap;
}
.column {
  flex: 1;
  flex-direction: column;
  margin-right: 3em;
}
.column:last-child {
  margin-right: 0;
}
.three {
  max-width: 33%;
  flex-basis: calc(33% - 3em);
}
.three:nth-child(3n) {
  margin-right: 0;
}
.debug {
  margin-bottom: 3em;
  background-color: #ebf5fb;
  height: 3em;
  border: 1px dashed red;
  text-align: center;
}

<section>
  <div class="flex wrap">
    <div class="column three debug">3 Columns</div>
    <div class="column three debug">3 Columns</div>
    <div class="column three debug">3 Columns</div>
    <div class="column three debug">3 Columns</div>
    <div class="column three debug">3 Columns</div>
  </div>
</section>

Codepen

Answer 1

Since you use flex: 1, it will make the element take all available space, what's left after the flex-basis been retracted.

What stop the 2 last items from filling the entire row is the max-width, and since that its value is wider than the flex-basis, they will expand to it.

Either remove flex: 1 from column, or use the same calc for max-width as used for flex-basis

Stack snippet

section {
  width: 1170px;
  margin: 0 auto;
  padding: 4em;
  background-color: lightgray;
}
.flex {
  display: flex;
}
.wrap {
  flex-wrap: wrap;
}
.column {
  flex: 1;
  flex-direction: column;
  margin-right: 3em;
}
.column:last-child {
  margin-right: 0;
}
.three {
  max-width: calc(33% - 3em);            /*  changed  */
  flex-basis: calc(33% - 3em);
}
.three:nth-child(3n) {
  margin-right: 0;
}
.debug {
  margin-bottom: 3em;
  background-color: #ebf5fb;
  height: 3em;
  border: 1px dashed red;
  text-align: center;
}

<section>
  <div class="flex wrap">
    <div class="column three debug">3 Columns</div>
    <div class="column three debug">3 Columns</div>
    <div class="column three debug">3 Columns</div>
    <div class="column three debug">3 Columns</div>
    <div class="column three debug">3 Columns</div>
  </div>
</section>

---

Updated based on a comment

If to also make the items spread equally inside its parent, one need to divide the sum of the actual margin/gutter/gap space with the amount of items.

So in this case it would be (2 gaps * 3em) / 3 items = 2em

Also, one need the closest possible to a 1/3, which can be either e.g. 33.33333% or (100% / 3)

Stack snippet

section {
  width: 1170px;
  margin: 0 auto;
  padding: 4em;
  background-color: lightgray;
}
.flex {
  display: flex;
}
.wrap {
  flex-wrap: wrap;
}
.column {
  flex: 1;
  flex-direction: column;
  margin-right: 3em;
}
.column:last-child {
  margin-right: 0;
}
.three {
  max-width: calc(33.33333% - 2em);            /*  changed  */
  flex-basis: calc(33.33333% - 2em);           /*  changed  */
}
.three:nth-child(3n) {
  margin-right: 0;
}
.debug {
  margin-bottom: 3em;
  background-color: #ebf5fb;
  height: 3em;
  border: 1px dashed red;
  box-sizing: border-box;                      /*  added  */
  text-align: center;
}
.debug2 {
  border: 1px dashed red;                      /*  added  */
  box-sizing: border-box;                      /*  added  */
}

<section>
  <div class="flex wrap debug2">
    <div class="column three debug">3 Columns</div>
    <div class="column three debug">3 Columns</div>
    <div class="column three debug">3 Columns</div>
    <div class="column three debug">3 Columns</div>
    <div class="column three debug">3 Columns</div>
  </div>
</section>

Answer 2

Thank you LGson for pointing me in the right direction.

My math was incorrect.

I needed to take 100% - the total margins in the row.

Instead of flex-basis: calc(33% - 3em); it needed to be flex-basis: calc( (100% - 6em) / 3);

Updated Snippet

*,
::before,
::after {
    background-repeat: no-repeat; /* 1 */
    box-sizing: inherit; /* 2 */
}

html {
    box-sizing: border-box; /* 1 */
    cursor: default; /* 2 */
    -ms-text-size-adjust: 100%; /* 3 */
    -webkit-text-size-adjust: 100%; /* 3 */
}

section {
  width: 1170px;
  margin: 0 auto;
  padding: 4em;
  background-color: lightgray;
}
.flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.wrap {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.column {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    margin-right: 3em;
    /*overflow: hidden;*/
}
.column:last-child {
  margin-right: 0;
}
.three {
      max-width: calc( (100% - 6em) / 3);
      -ms-flex-preferred-size: calc( (100% - 6em) / 3);
          flex-basis: calc( (100% - 6em) / 3);
}
.three:nth-child(3n) {
  margin-right: 0;
}
.debug {
  background-color: #EBF5FB;
  margin-top: 1em;
  padding: .75em;
  text-align: center;
  border: 1px dashed #E8DAEF;
}

<section>
    <h2>Layout for 2 Dimensions</h2>
    <h3>Specific Widths (or not)</h3>
    <div class="flex wrap">
      <div class="column three debug">1/3 Columns</div>
      <div class="column three debug">1/3 Columns</div>
      <div class="column three debug">1/3 Columns</div>
      <div class="column three debug">1/3 Columns</div>
       <div class="column three debug">1/3 Columns</div>
    </div>
  </section>