Re: [csswg-drafts] [css-flexbox] flex-shrink: hide (#4199)

Lacking a feature like this, we implemented this usin a somewhat complicated JS solution on https://www.gamestar.de and https://www.gamepro.de for the header navigation items.
Like @nxtman123, we're using a priority/importance system that indicates which items should be hidden first when they don't fit with higher numbers meaning the items are more important, i.e. are hidden later when there's not enough space.

In the past, there were some efforts to cover this functionality with regions. Though that approach is more complex. So I think, introducing a feature to just cover this use case is viable.

I agree with @nxtman123 that this should rather be controlled via a separate property, as hiding the elements is somewhat independent from how shrinkable they are.

Also, we should keep in mind that the concept of hiding something when it doesn't fit is something global. Therefore, if we restrict this to Flexbox for now, we might make it extensible so that it applies to other layouts as well. So, instead of fitting this into Flebox, I believe this would better be part of Overflow.

So, here's a concrete proposal:

```ebnf
overflow = discard

layout-priority = critical | high | normal | low
```

So, the new keyword `discard` for `overflow` indicates that the elements that don't fit should be discarded. (Maybe that could also be covered by the [`continue` property](https://drafts.csswg.org/css-overflow-4/#continue).)

`layout-priority` indicates the importance of the items within the container. It might also take a `<number>` value for more fine-grained control, though I fear that this would end up in people applying huge numbers like for `z-index`.

Applied to @nxtman123's example:

```css
button {
  display: flex;
  overflow: discard;

  & > img {
    flex: 0;
    layout-priority: critical;
  }

  & > .label {
    flex-grow: 1;
    layout-priority: normal;
  }

  & > .count {
    layout-priority: low;
  }
}
```

Sebastian

-- 
GitHub Notification of comment by SebastianZ
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/4199#issuecomment-3649241594 using your GitHub account


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

Received on Saturday, 13 December 2025 11:35:56 UTC