Change flex direction, after the flex container wraps

[manuelmeister]

I often come across the requirement to grow a flex item, but only If the flex container wraps:

Usually this comes up with buttons (e.g. submit & cancel) that should be full width, if they are not on one line.

Both currently possible "workarounds" are not desired:

Also if there are more than two items. Then it should wrap as well.

I think one way to solve this could be:

flex-wrap: wrap-column;
/* or probably better */
flex-wrap: wrap-direction;

This would make the direction of the flex container change upon wrap.

[fantasai]

So the interesting question here is: what are all the behavior changes that you'd want when it wraps to a stack? Is it enough just to change the flex-direction, or would you also want to change alignment or borders and margins or other effects?

[ByteEater-pl]

A general mechanism could be a ::single-line pseudo-element accepting a subset of properties. Not a pseudo-class, as that wouldn't allow the subset to be proper.

[manuelmeister]

@fantasai I imagine people wanting more than just flex-direction.
But I don't want a circular condition issue (like the position:sticky ::stuck problem)

I realized, this issue is a duplicate of #6366 (which I opened myself 🤦🏼‍♂️)