Issue

I was experimenting with the new gap support on display: flex; containers, however I ran in to an odd issue that appears to occur in every implementation. With the following code, the fourth column wraps to a new line, even though its flex-basis is set to 25% (and thus should remain on the first line).

.row {
    display: flex;
    flex-wrap: wrap;
    gap: 50px;
}

.col {
    flex: 1 1 25%;
}

<div class="row">
    <div class="col">
        Hello
    </div>
    <div class="col">
        World
    </div>
    <div class="col">
        Hello
    </div>
    <div class="col">
        World
    </div>
</div>

I believe this occurs because the flex-basis isn't taking in to account the gap that has been set. This sort of makes sense, but in practice it severely limits how gap can be used.

Proposed Solution

For this particular example, one possible workaround would be to set flex-basis: calc(25% - 37.5px);, which can be determined via the formula ($number-of-gaps * $gap) / $number-of-columns), however that doesn't take in to account situations where you have different sized columns within a flexed container (i.e. setting one of them to flex-basis: 50%). In theory, you could just work out the math each time you set up a flexed container, but this seems overly burdensome, especially if you want to re-use your grid system in multiple places throughout a project.

Similar to box-sizing: border-box; including borders within the box model for an element, there needs to be a property along the lines of flex-sizing: gap-box; that would include gap in to calculations based on flex-basis.

Demo

https://codepen.io/JacobDB/pen/ZEbJaNm