[csswg-drafts] [css-flex] Gap between flexed items when parent has flex-wrap: wrap; set causes the last item to wrap prematurely (#5399)

JacobDB has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-flex] Gap between flexed items when parent has flex-wrap: wrap; set causes the last item to wrap prematurely ==
# 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).

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

.col {
    flex: 1 1 25%;
}
```

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

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/5399 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Wednesday, 5 August 2020 14:51:41 UTC