pecentage (%) min-height and max-height have an effect within table cell with auto computed height

UNCONFIRMED
Unassigned

Status

()

Core
Layout: Tables
--
major
UNCONFIRMED
8 years ago
8 years ago

People

(Reporter: Nikita Vasilev, Unassigned)

Tracking

({css2, testcase})

Firefox Tracking Flags

(Not tracked)

Details

(URL)

Attachments

(1 attachment)

260 bytes, text/html
Details
(Reporter)

Description

8 years ago
User-Agent:       Mozilla/5.0 (Macintosh; Intel Mac OS X 10.5; rv:2.0b2) Gecko/20100720 Firefox/4.0b2
Build Identifier: 

It does work in IE 7+ and Opera. Also, the same bug in WebKit https://bugs.webkit.org/show_bug.cgi?id=43319

Reproducible: Always




http://elv1s.ru/files/html+css/max-height-within-table.png
(Reporter)

Updated

8 years ago
Keywords: css2, testcase

Comment 1

8 years ago
Created attachment 461953 [details]
testcase

Comment 2

8 years ago
This is a duplicate and/or invalid, I think.
The parser implies <tbody>. 
To get it work, you need this rule:   tbody { height: 100% }

Updated

8 years ago
Duplicate of this bug: 583633

Comment 4

8 years ago
hmm, percentage "height" or "min-height" works without the tbody rule
Summary: max-height doesn't work for elements within table cell → pecentage (%) max-height doesn't work for elements within table cell
(Reporter)

Comment 5

8 years ago
The testcase https://bugzilla.mozilla.org/attachment.cgi?id=461953 seems to show what div is always 4000px height (in Firefox 4 beta 2).

`tbody {height: 100%}` works in Firefox, thanks. Alas, it doesn't affect WebKit's behavior.
So per spec, min-height should probably not work either.

What happens there is that when doing a special height reflow the table cell pretends to have a non-auto computed height (see nsTableCellFrame::Reflow where it calls SetComputedHeight).  This affects computation of both min-height and max-height during that reflow.  But the percentage base for those is whatever the cell height was during the auto-height reflow.  So if you set a min-height in percent, then the cell will size to the height (plus its own styling) during the auto-height reflow and then when the special height reflow happens the given percentage min-height will be applied to the <div> without the table cell changing size.  That is, the <div> will overflow the table cell if > 100% is set.

When max-height is set in percent, the same thing happens, but in this case the cell size starts off at the auto-height computed height of the kid, since during the auto-height reflow the percentages are ignored.  Then the percentage base is just the height of the kid, and 100% is just that height.  So the behavior really is symmetric; the div is ending up affected by the min and max height; it's just that the percentage base is whatever the height is when min and max are ignored, and that's the max of the cell's own styling and the div's height (which is the only place asymmetry enters the picture).

I suppose we should leave this open for the fact that min and max height have any effect at all here...
Component: DOM: CSS Object Model → Layout: Tables
QA Contact: general → layout.tables
Summary: pecentage (%) max-height doesn't work for elements within table cell → pecentage (%) min-height and max-height have an effect within table cell with auto computed height
You need to log in before you can comment on or make changes to this bug.