- From: Šime Vidas via GitHub <sysbot+gh@w3.org>
- Date: Sun, 17 Sep 2023 06:42:28 +0000
- To: public-css-archive@w3.org
As @kizu’s pointed out in https://github.com/w3c/csswg-drafts/issues/4691#issuecomment-1715388016, container query units can help with this problem. After turning `<body>`* into a query container, `100cqw` can be used as a substitute for `100vw` to get the desired behavior. Unlike `100vw`, `100cqw` becomes smaller when a classic scrollbar appears on the page.
(*I use `<body>` because it didn’t work on `<html>` in Safari. I filed a [WebKit issue](https://bugs.webkit.org/show_bug.cgi?id=261649).)
For example:
```css
body {
margin: 0;
container-type: inline-size;
}
.full-width {
position: relative;
left: calc(50% - 50cqw);
width: 100cqw;
}
```
Demo: https://codepen.io/simevidas/pen/yLGzYBz?editors=0100
As far as I can see, `100cqw` behaves the way developers wanted `100vw` to behave with regards to classic scrollbars. In that case, I guess this issue can be closed. Developers can use `100cqw` instead of `100vw` for the “full-width” use-case, and in other situations where they need the actual viewport width in CSS.
--
GitHub Notification of comment by simevidas
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/6026#issuecomment-1722407312 using your GitHub account
--
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Sunday, 17 September 2023 06:42:30 UTC