CSS table-cell and overflow DIV

Question

I have a problem in Firefox with table cell and a DIV with overflow auto on it. Here is my markup:

<div id="container">
    <div id="category">
        <div id="row">
             <div id="refine">
                   <div class="content">
                        <!-- contains content -->
                   </div>
             </div>
        </div>
    </div>
</div>

And the CSS:

html, body {
   height: 100%;
}

#container {
    display: table;
    height: 100%;
    width: 500px;
    max-height: 200px;
}

#category { 
    display: table;
    height: 100%;
    width: 100%;
}

#row {
    display: table-row;
}

#refine {
    display: table-cell;
    height: 100%;
}

.content {
    float: left;
    height: 100%;
    width: 100%;
    overflow-y: auto;
}

.content p {
    float: left;
    width: 100%;
}

I've applied a max-height on the container - and all the child elements have 100% height of the container. In the above, .content needs to be scrollable once the content exceeds the max-height of its parent.

In Chrome this works as expected - a scrollbar is displayed on .content. However in Firefox and IE, the table cell simply expands down - it does not seem to respect the max-height setting of the container.

Here is a fiddle to demonstrate the issue: http://jsfiddle.net/LpzEM/6/ (try this in Firefox and Chrome).

By the way I am unable to change the base structure of the site - so it needs to still use display table, etc.

I think firefox is confused with nesting a display: table directly inside another display: table. Also, I think it wants the overflow to be on the element that has the max-height set. Like this: jsfiddle.net/davidpauljunior/LpzEM/11 — davidpauljunior
– davidpauljunior, Commented Feb 27, 2014 at 3:03
Aah that works, except I can't have it on the container as that means the whole container will be scrollable rather than the inner DIV. — MAX POWER
– MAX POWER, Commented Feb 27, 2014 at 3:07
I can.. but I was hoping it would just inherit automatically so that it would work for any screen size. — MAX POWER
– MAX POWER, Commented Feb 27, 2014 at 3:14
I might be missing something, but would it be any different to declaring it on the container? I mean in terms of screen size, you want the height to be 100% and the max-height to be 200px. Does it make a difference on a small device which element sets that? jsfiddle.net/davidpauljunior/LpzEM/14 — davidpauljunior
– davidpauljunior, Commented Feb 27, 2014 at 3:15

Bradley Flood · Accepted Answer · 2014-02-27 03:34:06Z

1

Try setting the .content overflow to scroll.

.content {
    // ...
    overflow-y: scroll;
}

This worked for me in Firefox on your JSFiddle.

See also http://www.w3schools.com/cssref/pr_pos_overflow.asp

edited Feb 27, 2014 at 3:34

answered Feb 27, 2014 at 3:00

Bradley Flood

10.6k3 gold badges49 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Bradley Flood Over a year ago

@LaszloPapp - Agreed. I've added a little more.

King-of-IT · Accepted Answer · 2014-02-27 05:00:57Z

try below code.. it works for chrome,firefox and latest internet explorer. In old internet explorer it doesn't support some css features.

<style>
html, body {
   height: 100%;
}

#container {
display: block;
width: 500px;
max-height: 200px;
overflow: scroll;
}

#category { 
    display: table;
    height: 100%;
    width: 100%;
}

#row {
    display: table-row;
}

#refine {
    display: table-cell;
    height: 100%;
}

.content {
    float: left;
    height: 100%;
    width: 100%;
}

.content p {
    float: left;
    width: 100%;
}
</style>
<div id="container">
    <div id="category">
        <div id="row">
             <div id="refine">
                   <div class="content">
                        <p>Lorem iPsum</p>
                        <p>Lorem iPsum</p>
                        <p>Lorem iPsum</p>
                        <p>Lorem iPsum</p>
                        <p>Lorem iPsum</p>
                        <p>Lorem iPsum</p><p>Lorem iPsum</p>
                        <p>Lorem iPsum</p><p>Lorem iPsum</p><p>Lorem iPsum</p><p>Lorem iPsum</p><p>Lorem iPsum</p><p>Lorem iPsum</p>
                        <p>Lorem iPsum</p>
                        <p>Lorem iPsum</p>
                        <p>Lorem iPsum</p>
                        <p>Lorem iPsum</p>
                        <p>Lorem iPsum</p>
                        <p>Lorem iPsum</p><p>Lorem iPsum</p>
                        <p>Lorem iPsum</p><p>Lorem iPsum</p><p>Lorem iPsum</p><p>Lorem iPsum</p><p>Lorem iPsum</p><p>Lorem iPsum</p>
                        <p>Lorem iPsum</p>
                   </div>
             </div>
        </div>
    </div>
</div>

Collectives™ on Stack Overflow

CSS table-cell and overflow DIV

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related