Scrollable containers ignore element margins/padding at bottom
Categories
(Core :: Layout, defect)
Tracking
()
People
(Reporter: epiqu1n, Unassigned)
Details
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:75.0) Gecko/20100101 Firefox/75.0
Steps to reproduce:
The container is set to scroll and has padding, and the elements within it have margins.
CSS for the first imgur album below:
.contentBody {
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: flex-start;
width: 100%;
height: 100%;
padding: 3rem;
overflow: auto;
}
.contentBlock {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
width: 45rem;
max-height: 74vh;
margin: 3rem;
}
Actual results:
Any elements at the bottom of a scrollable container will appear at the very bottom, ignoring any element margins or container padding. Elements at the top do get spaced properly from the top.
Similar scrollable containers with different flex styling also exhibit the same behavior, and this does not occur in Chrome.
Examples (all from Firefox, except first image which includes Chrome):
https://imgur.com/a/dEGFydE
https://imgur.com/a/H6AHJZS
Expected results:
The scrollbar should extend to the bottom of the container (ignoring padding) while the last elements are spaced away from the bottom according to their margins and the container padding. The expected behavior can be seen in Chrome in the first imgur album above.
|
||
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
|
||
this seems to be duplication of Bug 748518
|
||
Comment 3•6 years ago
|
||
Thanks alice.
Description
•