565111 - DIV with 'overflow:auto' does not work inside a TD

Status: RESOLVED DUPLICATE of bug 409736

(Core :: Layout: Tables, defect)

Description

[Gessé Dafé]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.2; en-US; rv:1.9.1.3) Gecko/20090824 Firefox/3.5.3 (.NET CLR 3.5.30729)
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.2; en-US; rv:1.9.1.3) Gecko/20090824 Firefox/3.5.3 (.NET CLR 3.5.30729)

DIV element with style="overflow:auto" do not show scroll bars when its contents exceeds its size and its parent is a TD element.

Reproducible: Always

Steps to Reproduce:
1. Create a simple HTML page containing a TABLE element;
2. Set the style attribute of the TABLE with the value "height:100px" (or any absolute or relative value you want);
3. Create a cell (TR>TD) in this TABLE;
4. Create a DIV inside the cell;
5. Set style attribute on the DIV with the following value: "height:100%; overflow:auto"
6. Fill the DIV with a long text that exceeds the available space on the TABLE/DIV;
Actual Results:  
The DIV grows to accommodate its contents, instead of displaying the scroll bars, making TABLE grow too.

Expected Results:  
The DIV should not grow, but stay the same size and display the scroll bars.

(see attachments for better understanding)

Comment 1

[Gessé Dafé]

Attachment: A simple HTML page that reproduces the error

Comment 2

[Gessé Dafé]

Attachment: A screen shot showing the bug on Firefox and showing the expected result as given by other browsers (Internet Explorer, Chrome and Opera)

Comment 4

[Eric]

Why is this bug in the "won't fix" status?  The latest version of Chrome properly handles a div child within a td taking 100% height with overflow set to auto working as expected.  In Firefox, the div and the td just grow without ever presenting a vertical scroll bar.  

See the fiddle here in both browsers to see the difference:  

https://jsfiddle.net/euzjvz1g/2/

After 7 years, this is still a major problem in Firefox!

Comment 5

[Eric]

Here's a better example which shows why this needs to be fixed:

https://jsfiddle.net/euzjvz1g/4/

The height overflow of the div shouldn't be affecting the height of the entire HTML document.