W3C home > Mailing lists > Public > public-css-archive@w3.org > August 2020

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

From: Jacob Bearce via GitHub <sysbot+gh@w3.org>
Date: Wed, 05 Aug 2020 14:51:35 +0000
To: public-css-archive@w3.org
Message-ID: <issues.opened-673601375-1596639094-sysbot+gh@w3.org>
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

This archive was generated by hypermail 2.4.0 : Tuesday, 5 July 2022 06:42:13 UTC