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

RESOLVED INVALID

Status

()

Core
Layout: Block and Inline
RESOLVED INVALID
13 years ago
11 years ago

People

(Reporter: Thomas Keller, Unassigned)

Tracking

Trunk
x86
Windows 2000
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(1 attachment)

(Reporter)

Description

13 years ago
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

Updated

13 years ago
Assignee: firefox → nobody
Component: General → Layout: Block and Inline
Product: Firefox → Core
QA Contact: general → layout.block-and-inline
Version: unspecified → Trunk
> 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.
Status: UNCONFIRMED → RESOLVED
Last Resolved: 13 years ago
Resolution: --- → INVALID
(Reporter)

Comment 2

13 years ago
So, since table-layout:fixed is not allowed/ not recognized in a &lt;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.
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....

(Reporter)

Comment 4

13 years ago
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...
> 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).
> 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

11 years ago
Created attachment 270943 [details]
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.
> 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.
You need to log in before you can comment on or make changes to this bug.