Scrollbar broken for text centered by Flexbox. |
|||||
Issue description
Chrome Version: 59.0.3047.0
OS: Win7; Win10 (should not matter).
What steps will reproduce the problem?
(1) Open attached flex.html and text-align.html in separate tabs of same window.
(2) Reduce window width and compare the tabs. Try to make window as narrow as possible, including the case of having side-mounted Developer tools.
What is the expected result?
As width reduces, horizontal scrollbar appears. All text ("ABCDEFG" and "boing)" should be viewable by adjusting scrollbar.
What happens instead?
For flex.html, the left side of page becomes inaccessible by scrolling. text-align.html works fine.
Please use labels and text to provide additional information.
- flex.html uses flexbox to do centering. I'm using "flex-direction: row; justify-content: center", but "flex-direction: column; align-items: center" also show this behavior.
- "ABCDEFG" is a large, unbroken text. If we remove it then "boing" would distribute and scroll without problem.
This bug is extracted from bug 703045 .
,
Mar 23 2017
+eae - TL for layout team
,
Mar 23 2017
cbiesinger could you please look into this? Loop in szager as needed.
,
Mar 23 2017
This is the second recent bug I've seen that expects centered text to be scrollable in both directions. That is an unusual request and doesn't happen anywhere else in the web platform. Why is this important for you? Alternatively, if you don't want true centering, akin to text-align: center, you can use auto margins for now. Eventually you'll be able to use the "safe" keyword in justify-content.
,
Mar 23 2017
This is a feature request, but an observation of rather surprising behaviour that points to potential bug, which can manifest in some other way. Also it's odd that you can scroll right but not left.
,
Mar 23 2017
Er, I mean *not* a feature request.
,
Mar 23 2017
Well, as a bug it's wontfix :p There is no feature on the web platform where an element starts in a "middle" scroll position. In general, content that overflows to the left/top is just invisible and can't be scrolled to. This is just one manifestation of it. The difference between text-align: center and justify-content: center is that the latter does true centering, even if the content will then overflow out of the left. So this is working as designed.
,
Mar 23 2017
Ah okay, if it's intended and there's no mystery on why it behaves this way then I'm fine with WontFix. Meanwhile, MS Edge also behaves in the same way.
,
Mar 23 2017
Firefox also behaves the same way, fwiw. OK, I'll close this. |
|||||
►
Sign in to add a comment |
|||||
Comment 1 by ew...@chromium.org
, Mar 22 2017