[csswg-drafts] [css-sizing][css-overflow][css-flexbox] Ability to control the sizing of the overflown content area (#8725)

kizu has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-sizing][css-overflow][css-flexbox] Ability to control the sizing of the overflown content area ==
I did recently stumbled upon some weirdness regarding how flex and overflow interact.

I could not find an issue that would talk about it, and couldn't find the exact place in the specs that describe this interaction, so would be helpful for any directions!

Disclaimer: this might be also the case for `display: grid`, I did not thoroughly tested anything other than `display: flex` for now.

References:

- A codepen with my examples: https://codepen.io/kizu/pen/oNaxbjo
- The only issue that I found that is _kinda_ related — https://github.com/w3c/csswg-drafts/issues/1865
- CSS Box Sizing Module Level 3 — https://www.w3.org/TR/css-sizing-3/
- CSS Overflow Module Level 3 — https://www.w3.org/TR/css-overflow-3/
- CSS Flexible Box Layout Module Level 1 — https://www.w3.org/TR/css-flexbox-1/

The problem:

- When we have a container that has both `display: flex` and a non-`visible` `overflow` (my exact case was with `overflow: auto`), we do not have any control on how the inner content box of the overflowing container is sized, resulting in content always shrinking up to the items' respective min intrinsic sizes:

    https://user-images.githubusercontent.com/177485/232137261-e92b9af9-0bea-47f6-81b8-e6f95ee05c41.mov

- What I want to have, achivable, for example, if we would instead move the flex container _inside_ the container with the `overflow` — we get control over how it would behave via `min-width` or `height`: the container is sized to fit all the items:

    https://user-images.githubusercontent.com/177485/232137501-69cca3b6-1b27-4143-b226-1578c8024145.mov

My proposal:

- Add a CSS property (or multiple?) that would control how the content area of the overflowing container should be sized.

Current workarounds:

1. The already mentioned separation of the overflow and flex — allows achieving both cases: when we want things to shrink, or not.
2. Using `.flex > * { flex-shrink: 0; }` — kinda works, but only for the `start` value of the `justify-content` property, otherwise things behave not in a desired way.



Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/8725 using your GitHub account


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

Received on Friday, 14 April 2023 19:25:04 UTC