1890937 - Tall content overflows from percent-height div, in table cell (td) with small specified height

Status: RESOLVED DUPLICATE of bug 1461852

(Core :: Layout: Tables, defect)

Description

[Daniel Holbert [:dholbert]]

Attachment: testcase 1

(This might be a known bug, not sure; we can dupe if it is.)

STR:

1. Load attached testcase.

EXPECTED RESULTS:
No overflow from the table.

ACTUAL RESULTS:
Cyan area overflows out of the table.

Firefox gives ACTUAL RESULTS. Chromium and WebKit give EXPECTED RESULTS.
In particular:

• In Firefox, the orange percent-height div successfully resolves against the short td height, and the tall cyan content inside of that percent-height div doesn't inflate the size of the td.
• In Chromium/WebKit, the percent height div seems to have its height treated as auto, so it grows to fit its content and contributes that height as a content-based minimum height for the cell, I think.

Comment 1

[Daniel Holbert [:dholbert]]

(as background: this particular Firefox behavior is the root problem in bug 1446442 that was causing trouble there, when we had moz-document parsing turned off in Nightlies for a little while. For whatever reason, ansible's docs (the affected pages there) had a pattern similar to the one in my testcase here -- they had td elements that were effectively styled with height:1px (technically inheriting the 1px from the tr); and then with the td containing a div with height:100%; and Firefox was dutifully resolving the cell and the div to be 1px tall, though in fact their design required both the td and the div to be content-sized, which is the layout that Chrome and WebKit ended up giving. Ansible had a -moz-document based CSS workaround to avoid the Firefox behavior here to get the content-based sizing that they really wanted; and we stopped parsing that workaround for a little while as we explored removing that proprietary CSS token (hence bug 1446442 being filed), which is when this behavior-difference started causing trouble there; but the issue went away when we started passing their workaround again, per bug 1446442 comment 21.)

Comment 2

[Daniel Holbert [:dholbert]]

Attachment: testcase 2 (with a border on the percent-height div)

I noticed that Chrome 125 dev ends up sorta-broken if I add a border to the percent-height div, as in the testcase here -- they end up drawing the border outside of the table cell, and leaving blank space inside the table cell.

WebKit (epiphany/gnome-web) still gives reasonable results though, looking similar to testcase 1 but just with another layer of border; and Firefox still shows overflow just as we do for testcase 1.

Comment 3

[Daniel Holbert [:dholbert]]

Attachment: screenshot showing Firefox vs Chrome vs WebKit on testcase 2

Comment 4

[Daniel Holbert [:dholbert]]

(In reply to Daniel Holbert [:dholbert] from comment #2)

Created attachment 9396173 [details]
testcase 2 (with a border on the percent-height div)

I noticed that Chrome 125 dev ends up sorta-broken if I add a border to the percent-height div, as in the testcase here

Filed https://issues.chromium.org/issues/333755516 for this.

Comment 5

[Daniel Holbert [:dholbert]]

Attachment: testcase 3 (like 2, but now with `vertical-align:top`)

(In reply to Daniel Holbert [:dholbert] from comment #2

I noticed that Chrome 125 dev ends up sorta-broken if I add a border to the percent-height div, as in the testcase here -- they end up drawing the border outside of the table cell, and leaving blank space inside the table cell.

Update on this: Chrome's behavior makes more sense if you add vertical-align:top to the td (the default middle value was responsible for the content overflowing off the top of the cell there, which is what looked particularly suspicious to me at first).

I've made that change in this version of the testcase (adding vertical-align:top), and I think Chrome's rendering (with overflow and blank space between the cyan box and purple border) is correct on this testcase and the other ones here. IanK added some notes about the steps involved over in https://issues.chromium.org/issues/333755516#comment3 , too.

Comment 6

[Daniel Holbert [:dholbert]]

I think this is the same thing covered in bug 1461852.