Re: [csswg-drafts] [css-contain] [css-sizing] [sizing-values] Allow sizing values like @container burgermenu (width < min-width) (#9978)

I gave the matter some thought, and in the mdn says "inline-size containment is applied to the element in both the inline and block directions, the size of the element **can** be computed in isolation, ignoring the child elements", so the isolation avoid circular references.

I dont figure how the min-size can be calculated ignoring the child elements, in isolation.
Think in some like this to prevent circular references and use child elements:

```js
var a_size              = computed_with_child_elements_in_isolation( node, general_rules ),
  container_what_match       = get_container_what_match( node, a_size ),
  general_rules_and_container_rules = general_rules + container_what_match.rules,
  b_size              = computed_with_child_elements_in_isolation( node, general_rules_and_container_rules ),
  containers            = [ ];
  
while ( a_size != b_size && containers.indexOf(container_what_match.id) == -1 ) {
 containers.push(container_what_match.id);
  
  container_what_match       = get_container_what_match( node, b_size );
  general_rules_and_container_rules = general_rules + container_what_match.rules;
 a_size              = b_size;
 b_size              = computed_with_child_elements_in_isolation( node, general_rules_and_container_rules );  
}

// now
container_what_match === FINAL_CONTAINER_RULES_TO_APPLY
b_size          === FINAL_SIZE
```

some approach when every @container rule is only applied one time per element dont be a problem with recursion.

for example if this rule is the last in css, the element is computed with a width of 0
```css
@container (width < min-width) {
  #content { width: 0 }
}
```

for example if this rule is the last in css, the element is computed with a width of calc(100% of_container_width  + 100px) only one time, if width is 1000 and min-width is 950 and max-width is 1020 #content width is 950 the result is a container of 1020px and content width of 1050 with 30 of content overflow
```css
@container (width >= min-width) {
  #content { width: calc(100% + 100px) }
}
```
if width is 1000 and min-width is 950 and max-width is 1500 content width is 950 the result is a container of 1050px and content width of 1050 with 0 of content overflow
```css
@container (width >= min-width) {
  #content { width: calc(100% + 100px) }
}
@container (width >= min-width) {
  #content { width: calc(100% + 100px) }
}
```
if width is 1000 and min-width is 950 and max-width is 1500 content width is 950 the result is a container of 1150px and content width of 1150 with 0 of content overflow

uhmm i dont know what i want in the last case, what is better, the proposal or what the last rule override the first?

i dont know how this things are computed internally, where i can learn more about the tecnical current implementation for get a better understanding of this topic?

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


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

Received on Sunday, 10 March 2024 00:01:00 UTC