282571 - display:table-cell makes overflow:auto not display scrollbars in fixed divs

Status: RESOLVED INVALID

(Core :: Layout: Block and Inline, defect)

Description

[Thomas Keller]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.7.5) Gecko/20041107 Firefox/1.0
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.7.5) Gecko/20041107 Firefox/1.0

<div style="width:100px;height:100px;overflow:auto">
A lot stuff here ....
</div>

works as expected: a 100x100px^2 div which displays a scrollbar
on the right if the content is bigger than the available space.

<div
style="width:100px;height:100px;overflow:auto;display:table-cell;vertical-align:top">
A lot stuff here...
</div>

does break the size fixation and expands the box as appropriate for
the containing content.

What do I like to achieve?

If the dynamic content does not use the complete available area
the content should be centered like in a table cell. If it uses
the complete area, there should be scrollbars to display all of
it.

I know vertical-align means the "outer" alignment of an element,
rather than the alignment of child items, but since the content
I'm passing into the div can be anything I can't apply 

<childitem style="vertical-align:top">...</childitem>

to it.

Reproducible: Always

Comment 1

[Boris Zbarsky [:bzbarsky]]

> does break the size fixation and expands the box as appropriate for
> the containing content.

Table cells do not allow overflow in CSS in the "auto" table layout model.  See
http://www.w3.org/TR/CSS21/tables.html#auto-table-layout step 1 and
http://www.w3.org/TR/CSS21/tables.html#height-layout paragraph 3.

So the rendering is correct given that CSS.

Comment 2

[Thomas Keller]

So, since table-layout:fixed is not allowed/ not recognized in a <div> (I
just tested that), there is no "legal" way of doing what I like to achieve?

Damn... too bad. Is display:table-cell for anything useful either?

Regards,
Thomas.

Comment 3

[Boris Zbarsky [:bzbarsky]]

table-layout applies to display:table boxes. You could use display:table on the
div, and see how far that takes you.

I don't follow what you're trying to get out of this (eg, where does centering
come in?), so....

Comment 4

[Thomas Keller]

display:table does not help in my case.
Again, what I like to achieve:

I have a fixed-size box (e.g. 200x200 px^2)
in which dynamic content, which comes from some
CGI, is placed (text, pictures, whatever).

Now, if the content's total rendered height is
smaller than the height of the box (200px), I like
to have this content vertically centered.

If the content is too big for the 200px I like to 
see scrollbars on the left just as normal for
the overflow behaviour.

I could always "hack" a one-cell table inside the div
which scales 100% height and vertically centers
all the content, but I thought tables are disregarded
for layout things...

Comment 5

[Boris Zbarsky [:bzbarsky]]

> I like to have this content vertically centered.

Ah, ok.  You can't really do this in a reasonable way in CSS at the moment (as
of CSS2.1).

Comment 6

[Hixie (not reading bugmail)]

> I thought tables are disregarded for layout things...

Using HTML tables for layout is bad -- however, using CSS tables is fine (CSS is
all about layout).

Comment 7

[Frédéric Buclin]

Attachment: testcase

Boris, is this testcase the same issue as described by the reporter? I mean having overflow: scroll applied to the cell should have the same effect as having this style applied to a DIV inside the cell, which is not the case.

http://www.w3.org/TR/CSS21/visufx.html#propdef-overflow says 'overflow' should also work with table cells.

Comment 8

[Boris Zbarsky [:bzbarsky]]

> Boris, is this testcase the same issue as described by the reporter?

No idea.  I'd suggest filing a new bug rather than commenting in this old one... cc me on that new bug?

I agree that in your testcase some of the cells should be scrollable and aren't at the moment.