W3C home > Mailing lists > Public > public-css-archive@w3.org > November 2016

Re: [csswg-drafts] [css-align][css-flexbox][css-grid] Difference between overflow behaviour when aligning and justifying to start and end in flexbox and grid

From: fantasai via GitHub <sysbot+gh@w3.org>
Date: Sat, 26 Nov 2016 01:21:46 +0000
To: public-css-archive@w3.org
Message-ID: <issue_comment.created-263037276-1480123305-sysbot+gh@w3.org>
This is a case for using `margin: auto`, I think. We're locked into 
not being able to scroll to the top or left because, historically, 
browsers didn't do that and Web pages started relying on that to hide 
content by offsetting it thousands of pixes to the top/left. Nevermind
 that we didn't have a good UI model for the initial scroll position 
being in the middle of the scrollable area, allowing users to scroll 
to that hidden content would make the scrollbars unusable because of 
the huge scale of that distance.

So in Flexbox, `margin: auto` alignment is "safe" alignment, where if 
it overflows it always overflows the end edges of the box. And the 
alignment properties are "unsafe" alignment: they can result in 
content overflowing to the top or left, where it can't be accessed. 
But they allow for 
true centering/right alignment, which are needed for some designs.

In Box Alignment, we've got two solutions we're tossing around:
  1.) Making the "unsafe" alignment behavior of the alignment 
properties a little smarter, by having it only disobey the specified 
alignment if it will actually overflow the scrollable area, rather 
than basing the end-alignment safety trigger on whether it overflows 
its containing block.
  2.) Giving the author control over this with the "safe" and "unsafe"
 keywords, which will explicitly trigger the `margin: auto`-type 
behavior or the 
overflow-if-necessary-but-absolutely-preserve-alignment behaviors, 
respectively.

(It's a bit unclear atm if #1 is implementable; if not it'll behave as
 "unsafe".)

See https://drafts.csswg.org/css-align/#overflow-values

-- 
GitHub Notification of comment by fantasai
Please view or discuss this issue at 
https://github.com/w3c/csswg-drafts/issues/751#issuecomment-263037276 
using your GitHub account
Received on Saturday, 26 November 2016 01:21:52 UTC

This archive was generated by hypermail 2.4.0 : Tuesday, 5 July 2022 06:41:05 UTC