Re: [csswg-drafts] [css-flexbox] new flex wrap value that changes the flex direction (#6366)

@kizu Thank you for sharing this, it was super enlightening! And I found a way to merge your [tabs](https://kizu.dev/position-driven-styles/#tabs) approach with mine:

Instead of splitting up the first item and the rest, it wraps around your flex container and uses an extra element to force the scroll container to overflow when your items would need to start wrapping.

Demo: https://codepen.io/jamiebuilds/pen/gbwbrwq?editors=1100

```html
<div class="flex-wrap-detector-container">
  <div class="flex-wrap-detector-overflower"></div>
  <div class="flex-wrap-detector-contents">
    <div class="flex">
      <div class="item">Item 1</div>
      <div class="item">Item 2</div>
      <div class="item">Really really long item 3</div>
    </div>
  </div>
</div>
```

```css
.flex-wrap-detector-container {
  container-type: scroll-state;
  display: flex;
  flex-wrap: wrap;
  overflow-x: hidden;
}

/* extra element to force the scroll container to overflow when items wrap */
.flex-wrap-detector-overflower {
  position: relative;
  flex-grow: 1;
  
  &::after {
    content: "";
    display: block;
    position: absolute;
    right: -1px;
    width: 1px;
    height: 1px;
  }
}

/* The contents should grow rather than the overflower when they are in the same row */
.flex-wrap-detector-contents {
  flex-grow: 9999;
}

.flex {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.item {
  flex-grow: 1;
  background: dodgerblue;
  
  /* when scrollable */
  @container not scroll-state(scrollable: none) {
    width: 100%;
  }
}
```


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


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

Received on Thursday, 26 February 2026 00:19:43 UTC