Re: [csswg-drafts] [css-sizing-4] How does height: stretch interact with margin collapsing with parent (#11044) from Oriol Brufau via GitHub on 2024-10-17 (public-css-archive@w3.org from October 2024)

From: Oriol Brufau via GitHub <sysbot+gh@w3.org>
Date: Thu, 17 Oct 2024 15:45:07 +0000
To: public-css-archive@w3.org
Message-ID: <issue_comment.created-2419902622-1729179904-sysbot+gh@w3.org>

Quick test: https://software.hixie.ch/utilities/js/live-dom-viewer/saved/13208

```html
<!DOCTYPE html>
<style>.stretch { height: -moz-available; height: -webkit-fill-available; height: stretch }</style>
<div style="outline: solid; height: 100px; width: 100px">
  <div class="stretch" style="margin: 10px; border: solid magenta"></div>
</div>
<br>
<div style="outline: solid; height: 100px; width: 100px">
  <div style="overflow: hidden"></div>
  <div class="stretch" style="margin: 10px; border: solid cyan"></div>
  <div style="overflow: hidden"></div>
</div>
```

| Gecko | Blink | WebKit |
| - | - | - |
| ![](https://github.com/user-attachments/assets/42b5b237-4fb1-4708-8834-4d64c6ad20b9) | ![](https://github.com/user-attachments/assets/98853ce1-2a86-4397-b9eb-fa7b4493b392) | ![](https://github.com/user-attachments/assets/d8aeca61-508d-4027-ba9a-81bfdd861b10) |

I think the spec says that magenta should be like WebKit, and cyan like Blink, which is what looks the best to me.


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


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

Received on Thursday, 17 October 2024 15:45:08 UTC