Re: [csswg-drafts] [css-overflow] Clarify the contribution of untransformed direct descendant box (#12113)

• From: Oriol Brufau via GitHub <sysbot+gh@w3.org>
• Date: Tue, 29 Apr 2025 23:04:40 +0000
• To: public-css-archive@w3.org
• Message-ID: <issue_comment.created-2840426119-1745967878-sysbot+gh@w3.org>

I don't trust jsfiddle to keep hosting the examples

<details><summary>Example 1</summary>

```css
.container {
  width: 150px;
  height: 150px;
  overflow: scroll;
  background: silver;
  border: solid thick;
}

.element {
  width: 200px;
  height: 200px;
  background: lime;
}

.element-2 {
  width: 100px;
  height: 100px;
}
```
```html
  <div class="container">
    <div style="transform: translate(-50%, -50%);" class="element">
    </div>
  </div>
```

</details>


<details><summary>Example 2</summary>

```css
.container {
  width: 150px;
  height: 150px;
  overflow: scroll;
  background: silver;
  border: solid thick;
}

.element {
  width: 200px;
  height: 200px;
  background: lime;
}

.element-2 {
  width: 100px;
  height: 100px;
}
```
```html
<div class="container">
  <div style="width: 150px; height: 150px;">
    <div style="transform: translate(-50%, -50%);" class="element">
    </div>
  </div>
</div>
```

</details>

<details><summary>Example 3</summary>

```css
.container {
  width: 150px;
  height: 150px;
  overflow: scroll;
  background: silver;
  border: solid thick;
}

.element {
  width: 200px;
  height: 200px;
  background: lime;
}

.element-2 {
  width: 100px;
  height: 100px;
}
```
```html
  <div class="container" style="position: relative;">
    <div style="transform: translate(-50%, -50%); position: absolute;" class="element">
    </div>
  </div>
```

</details>

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


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

Received on Tuesday, 29 April 2025 23:04:41 UTC