Re: [csswg-drafts] [css-sizing-4] How does height: stretch interact with margin collapsing with parent (#11044)

Hi - I'm back from leave and was discussing these rules today (that David has currently implemented).

One concerning side-effect is this usecase (e.g. very common on landing pages):

```html
<!DOCTYPE html>
<style>
html,body { height: 100%; } /* or stretch, e.g. people place -webkit-fill-available here quite often). */
div { height: stretch; margin: 50px; border: solid 5px; }
</style>
<div></div>
<div></div>
<div></div>
```

Here a web-developer would (IMO correctly) assume that all the `<div>`s would be the same size, but due to the preceding/following sibling rules they end up as different sizes which is unexpected (and very confusing to explain).

We should likely remove the proceeding/following sibling rules for this (even if it degrades some of the single element cases). IMO the multiple children cases with margin+stretch (esp. for block layout), will be far more common than the single child with margin.

(I don't have a good counter proposal yet, just that we should keep all children with the same `height: stretch` as having the same height).
 

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


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

Received on Wednesday, 4 December 2024 21:40:12 UTC