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

This can somewhat be achieved today with `scroll-state()` container queries with the caveat that once it switches direction it can't switch back

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

```html
<div class="container">
  <div class="flex">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
  </div>
</div>
```

```css
.container {
  container-type: scroll-state;
  overflow-x: hidden;
}

.flex {
  display: flex;
  gap: 5px;
  
  /* not scrollable */
  @container scroll-state(scrollable: none) {
    .item {
      min-width: fit-content;
    }
  }

  /* scrollable */
  @container not scroll-state(scrollable: none) {
    flex-direction: column;
    /* fix for cycles: make scrollable state "sticky" */
    width: calc(100% + 1px);
  }
}

.item {
  flex-grow: 1;
  background: dodgerblue;
}
```

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


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

Received on Wednesday, 25 February 2026 20:58:41 UTC