Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[css-position] Insets don't reduce the cb when sizing an abspos #5082

Open
Loirooriol opened this issue May 18, 2020 · 3 comments
Open

[css-position] Insets don't reduce the cb when sizing an abspos #5082

Loirooriol opened this issue May 18, 2020 · 3 comments

Comments

@Loirooriol
Copy link
Contributor

From https://drafts.csswg.org/css-position/#abspos-insets

For an absolutely positioned box, the inset properties effectively reduce the containing block into which it is sized and positioned by the specified amounts.

And https://drafts.csswg.org/css-position/#abspos-layout goes on with

  1. First, its inset-modified containing block is calculated, defining its available space. (See § 3.5 Absolute (and Fixed) Positioning.) [...]
  2. Next, its width and height are resolved against this definite available space [...]

But that's not actually the case. Percentages are resolved with respect to the original containing block size, not the inset-modified one. E.g.

#cb {
  position: relative;
  width: 100px;
}
#abspos {
  position: absolute;
  left: 25px;
  right: 25px;
  width: 100%;
  height: 100px;
  background: blue;
}
<div id="cb">
  <div id="abspos"></div>
</div>

results in a 100x100 square, not a 50x100 rectangle. https://software.hixie.ch/utilities/js/live-dom-viewer/saved/8114

@Loirooriol Loirooriol added the css-position-3 Current Work label May 18, 2020
@Loirooriol
Copy link
Contributor Author

I guess the "width and height are resolved against this definite available space" refer to an auto width/height. But as currently stated it's misleading.

@fantasai
Copy link
Collaborator

fantasai commented Sep 3, 2021

@Loirooriol Thanks for catching this. I added a sentence to except percentages. (Didn't want to make the general rule specific to auto because it will also apply to the fit-content and stretch keywords.) Let me know if the edits look good.

@Loirooriol
Copy link
Contributor Author

Loirooriol commented Sep 3, 2021

Seems fine, but I have tested fit-content and stretch, and we don't have interoperability:

  • In Firefox, -moz-fit-content and -moz-available use the inset-modified area indeed.
  • In Chromium and WebKit, fit-content and -webkit-fill-available use the original area, like percentages.

https://software.hixie.ch/utilities/js/live-dom-viewer/saved/9601

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants