Post

I'd also love support for 'auto' in `max()`, `min()`, etc. This is useful for flex layouts where a child should justify at the end, but always have a minimum margin: ```css margin: max( 8px, auto ); ```

It's already available: developer.mozilla.org/en-US/docs/W...

Alternatively, the ability to do outline-left etc (similar to border-left) would be nice. Outline is nice because it doesn't affect the box sizing like border does.

ooo! I need to start playing with this! Thanks for the tip :)

Regions. Content that flows from one element to another (or grid cell)

As I sit here adding `role="presentational"` to a bunch of decorative spans, I'd love to revisit the Cascading Attribute Sheets discussion again.

For the design of gaps, this should help: developer.chrome.com/blog/gap-dec...

Non-linear transform, e.g. mesh distortion

Circular layout and/or polar coordinates. Imagine a flexbox that curves around an origin point so that its x-axis edges meet. You could use it build pie-chart like layouts, for example.

Direct children count? Sure you can count siblings now and you can also "has-spam" it. But a children-count() calc function would be powerful especially combined with css conditionals.

Yes, with grid (and same sized columns), it’s possible. But how to do it with variable with elements in flex-box? How can I hide input fields on row >1 ? (Hide, because they should not be focusable)

I would love to see support for variables in container size queries. This is mentioned in the spec, but no browser vendor seem to have it on the radar right now.

+1 to overflow detection. Having a way to easily adapt layout such as allowing horizontal scrolling on mobile of panels etc. Sort of tied to this is content wrapping, such as a grid item being pushed to a new row. Being able to style it to span or centre etc.

Basically, something like this. Where the menu overflows, the excess content is reassigned to the popover slot. The light DOM doesn't change. codepen.io/dutchcelt/pe...

PTAL github.com/MicrosoftEdg...

github.com/w3c/csswg-dr...

Same here.. With how much simpler css is these days, it would feel nitpicky to focus on marginal improvements I'm hardly an expert, but I get by and so far not found something I can't work around I'd love for 3rd party tools to stop reinventing the wheel with custom theming plugins though

Yeah, I'd love that. I currently accomplish this with JS but would love to cut that out, not that it's terrible or anything.

+1: when I needed to hide rows > 1 of a series of labeled dropdown filters, I ended up using a sass generated series of container queries based on the static filter-width. But what should I do if that width wasn’t fixed, but varying instead? Is there a way to only show row 1 of a wrapped flow?

Changing justify-content on flex wrap would be handy. On one line space-around/between is nice but center is often better when wrapping.

this this this

Interesting, I :has heard of that limitation before 😉

I remember hearing the same thing about container queries when first discussed and look where we are now! 😉

I am not sure if it counts as layout, I would like to move elements to top-layer declaratively using css. And have z-index work in top-layer.

A grid-area function for background-position would be nice. placing multiple backgrounds based on the elements css grid layout. Like placing a background behind a sidebar. Something typically done with generated content today and `z-index:-1` today. but that is limited to two elements max.

Being able to assign an item to a grid area regardless of nesting structure and without passing grid context down.

Faced some issues this past weekend getting text to dynamically scale to its parent container. Thankfully there are hacks and there is ongoing development on getting this standardized. kizu.dev/fit-to-width github.com/w3c/csswg-dr...

Overflow selector, so that I can apply some styles if the contents don't fit (preferably such that I can apply styles to make them fit)

Something like span minmax(2, all) then, yeah?

Do you you know the column start? In that case, you could compute the number of columns from the available parent width and the column width (we now have length division in CSS) subtract the column start from the number of columns and then use a min span. 🤔

I wish we were able to make sticky columns in a table without using JS, currently we have to take into account the width of all previously stuck columns to make it work. Maybe we can introduce some keyword, e.g. "left: additive", to let the browser know that we want to do calculations for us?

I want flow with grid-columns, and the ability to float-align into those columns, with text wrapping. like grid-lanes, but this time grid-flow. For editorial, article layouts, pull quotes, side notes etc

+1 to overflow detection (::overflows-x or so) Using Svelte here is ok due to reactive dom bindings but it’d be so nice to handle it without JS. Think: horizontally scrollable tabs in a narrow container. if tabs container overflows, I want to add a gradient overlay on the edge and maybe a button

This is also where multiple position stickies could benefit. Stacking them responsively on mobile and desktop would be much easief if they could be teleported to a different container when stuck.

I second this. Basically all functionality in slots that is missing.