Scrollable element within flexbox is not scrollable
Categories
(Core :: Layout: Flexbox, defect, P3)
Tracking
()
People
(Reporter: mlsubscriber, Unassigned)
Details
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:72.0) Gecko/20100101 Firefox/72.0
Steps to reproduce:
We have a tall div element within a scroller element having overflow:auto applied. Both elements are within a hierarchy of display:flex / flex elements.
See: https://jsfiddle.net/btkgosf6/1/
Actual results:
The tall element causes the parent elements to be streched to the size of the tall element even though the parent elements are restricted in size due to display:flex / height / flex rules.
Expected results:
The scroller element should respect the size constraint by flexbox layout and the tall element should cause a vertical scrollbar to appear on the scroller element.
The above example works in all common browsers (IE 11, Edge, Edge/Chromium, Chrome).
|
||
Comment 1•6 years ago
|
||
Bugbug thinks this bug should belong to this component, but please revert this change in case of error.
|
||
Comment 2•6 years ago
|
||
Hmm, as a workaround, adding max-height: 100% to the .wrapper > * rule works. But that means that there's something off with our percentage resolution inside flexbox, probably...
|
||
Comment 3•6 years ago
|
||
Maybe dholbert could look into this once he's back from leave.
I don't know if/how I can edit my bug report text, so I just add a comment:
Here is a more sophisticated example that shows the markup in our JS app. It uses flex layout to implement horizontal and vertical layouts having stretched content areas and natural sized top/bottom or left/right areas.
Complex example: https://jsfiddle.net/rz97to3v/1/
The complex example is also fixable using the max-height: 100% workaround. You have to add it to
.component-with-feedback,
.component-with-feedback .component-wrapper
.component-with-feedback .component-wrapper > *
Without the workaround the complex example works as expected in IE 11, Edge, Edge/Chromium, Chrome.
|
||
Comment 5•3 years ago
|
||
The testcase works as expected without the workaround. Fixed by bug 1316534.
Description
•