Overflow auto not working as expected for display table-row

UNCONFIRMED
Unassigned

Status

()

UNCONFIRMED
6 years ago
6 years ago

People

(Reporter: theo, Unassigned)

Tracking

15 Branch
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(2 attachments)

(Reporter)

Description

6 years ago
Created attachment 665140 [details]
index.html

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_0) AppleWebKit/537.4 (KHTML, like Gecko) Chrome/22.0.1229.79 Safari/537.4

Steps to reproduce:

Attempting to create a layout where by there is a variable height sticky header, variable height sticky footer and content that fills the remaining space in-between. If the content is too big to fit in the view port then the centre section should scroll.

The attached code works in webkit browsers, but does not work in Firefox. It's unclear what is the correct behaviour, but intuitively it seems like overflow: auto should not be ignored in this example.


Actual results:

The entire view port scrolls when the view port is too small for the centre section to be entirely displayed - pushing the footer out of the view port.


Expected results:

The centre section should scroll (overflow auto) when the content exceeds the size of the centre section - meaning that the header and footer stay at the top and bottom of the view port.
(Reporter)

Updated

6 years ago
OS: Mac OS X → All
Hardware: x86 → All
Attachment #665140 - Attachment mime type: text/plain → text/html
Gecko trunk and Opera12 show the same behavior
Component: Untriaged → Layout
Product: Firefox → Core
(Reporter)

Comment 2

6 years ago
Created attachment 665319 [details]
Example where WebKit and Gecko have the same behaviour
(Reporter)

Comment 3

6 years ago
With the testcase https://bugzilla.mozilla.org/attachment.cgi?id=665319, both WebKit and Gecko show the same behaviour - not allowing overflow.

However, if `.l-fit-height-row-content` is changed to `display: block` then WebKit will exhibit the desired behaviour, but Gecko will render it in exactly the same fashion.
That first testcase is relying on a WebKit bug.  In particular, <div class="l-scroll-content"> has 100% height, but its parent is auto height, so the height on the child should also compute to "auto".  And therefore it should not overflow...  WebKit does weird things with percent-height kids of auto-height table rows in some cases that don't follow the spec.

Comment 5

6 years ago
We've run into the same bug where we can get the desired layout (as described in the bug) in Webkit but not in Firefox - if this is relying on a bug, whats the correct way to achieve this layout?
(Reporter)

Comment 6

6 years ago
Martin Häcker: We've solved the issue like so http://stackoverflow.com/a/12622740/101515

Comment 7

6 years ago
Wow thanks!
You need to log in before you can comment on or make changes to this bug.