Patrick BrossetThe ability to style grid and flex gaps is coming fast in a browser near you!
Bubbling with ideas for what this will be useful for!
Code: https://github.com/MicrosoftEdge/Demos/tree/main/css-gap-decorations
Olliew@patrickbrosset Where is the best place to give feedback for early features like this? Combining it with flex-wrap: balance; seems slightly buggy.
Roma Komarov@Olliew @patrickbrosset I think in this case it is a slightly different problem with the shrink-wrapping (if by buggy you mean gaps going to the edges of the container)
@kizu @patrickbrosset Yep that's my issue, the row-gap (and the gap decoration) are stretching all the way to the very edge despite width: fit-content and margin-inline: auto set on the flex container.
@Olliew @patrickbrosset Yep, I don't think this is a gap decoration fault, see https://kizu.dev/shrinkwrap-problem/ — this is just the way CSS wrapping works (filling the parent). If we want to solve this case for gap decorations, we'd want to solve it in general.
The Shrinkwrap Problem: Possible Future Solutions
There is one old, yet unsolved, CSS problem: shrinking containers to fit the content when it automatically wraps. While not intentional, anchor positioning allows us to come closer to solving it, at least for a few cases. In this article, I’ll demonstrate how we can use anchor positioning to neatly decorate wrapping text or elements in flex or grid contexts.
@kizu @patrickbrosset reminds me of a similar issue with text-wrap pretty