1619042 - Flex Direction and Y Scrolling

Status: RESOLVED DUPLICATE of bug 1042151

(Core :: Layout: Flexbox, defect)

Description

[socialentry]

User Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.122 Safari/537.36

Steps to reproduce:

Example:
https://jsfiddle.net/eimmot/vp9earth/19/

Click Add Item about a dozen times, the Y scrollbar does not show.

Works on Chrome. Firefox will not display the Y scrollbar, in fact it displays the X scrollbar instead.

Actual results:

Y scrollbar is disabled.

Expected results:

Y scrollbar should appear.

Comment 1

[Raluca Popovici, Desktop QA]

Hi,
I was able to reproduce this issue on all Firefox versions(73, 74, 75) on my PC(Win 10).
Thanks for your report!

Comment 2

[Emilio Cobos Álvarez (:emilio)]

Well the horizontal scrollbar thing is expected (it also happens on chrome when you add more content to each <p>), but yeah this looks like a flex sizing issue... off-hand I'd expect the same behavior as the test-case with flex-direction: column.

Comment 3

[Daniel Holbert [:dholbert]]

(In reply to socialentry from comment #0)

Click Add Item about a dozen times, the Y scrollbar does not show.

Yup, this is bug 1042151. flex-direction: column-reverse makes the overflowing content overflow off of the top (the writing-mode's "Start" side) which we don't treat as a direction where scrollable overflow can happen, really (for now), and bug 1042151 is filed on flipping this for reverse-oriented flex containers.

Firefox will not display the Y scrollbar, in fact it displays the X scrollbar instead.

To be clear, it's also totally reasonable that the horizontal scrollbar appears here.

The element implicitly ends up with overflow-x: auto (due to the default value visible computing to auto per https://www.w3.org/TR/css-overflow-3/#overflow-properties , since the other axis has "neither visible nor clip" (specifically, "scroll").

And there's some wide text, which is wide enough to overflow off the right side (the "end" side for the writing-mode), which makes overflow:auto produce a scrollbar.