Overflow doesn't work when using display:table-cell

Question

What I am trying to do is align divs in another div from the bottom.. The code I have right now is :

#container{
height: 375px;
display: table-cell;
width: 660px;
vertical-align: bottom;
margin:none;
overflow-y:auto;    
}

#container > div{
margin:none;
width:660px;
}

This seemed to work. But when the content inside the container div increased the height of container also increased though I have set a fixed height and overflow-y to auto. What should I do to make it work?

JsFiddle: http://jsfiddle.net/qNw7E/1/

Not sure if it will work, but have you tried restricting the row height, instead of just the cell? — Dan Goodspeed
– Dan Goodspeed, Commented Nov 22, 2013 at 12:05
You want the inner div to expand until it is equal to the height of the parent (375px) and then you want a scroll bar to appear on the parent? — Marc Audet
– Marc Audet, Commented Nov 22, 2013 at 12:09

Adam McElroy · Accepted Answer · 2013-11-22 12:21:32Z

1

I have used absolute positioning to try to fix your problem - fiddle here. Even when more lines of content are added, the height of the container will stay the same and a scrollbar will appear instead.

The CSS is simple:

#container {
    width: 660px;
    height: 375px;
    position: relative;
    background: #eee;
    overflow: hidden;
}

#container .content {
    width: 100%;
    max-height: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    overflow: scroll;
}

The main container has a set height and hides any overflow. The content div inside is absolutely positioned to the bottom of this div and can never exceed the height of the main container. If it reaches 100% of the main container's height then a scrollbar will appear.

Try adding more content in and you'll see the scrollbar appear.

answered Nov 22, 2013 at 12:21

Adam McElroy

4581 gold badge3 silver badges10 bronze badges

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

3 Comments

user1763032 Over a year ago

doesn't work.. Please check the jsfiddle link i have added in the question

Adam McElroy Over a year ago

You haven't added in the div with class content inside the main container like I suggested. Please see my fiddle here and look at the HTML and CSS.

user1763032 Over a year ago

Thanks Adam McElroy. After I have added another div inside the container div and put my contents in that div, it's working. Thanks

SpliFF · Accepted Answer · 2013-11-22 12:10:41Z

1

Your issue is that that the CSS spec is quite clear that overflow does not apply to table cells, browsers will ignore it. You may have better luck using inline-block for your aligned elements and set vertical-align:bottom on the parent. You might also be able to use a nested div in each TD but that's still tricky because 100% height doesn't work in children of table-cells either.

When you think about it, it actually makes sense. Table cells are supposed to scale to fit their children, not the other way around.

answered Nov 22, 2013 at 12:10

SpliFF

39.1k16 gold badges95 silver badges122 bronze badges

1 Comment

user1763032 Over a year ago

doesn't work.. Please check the jsfiddle link i have added in the question

Vipul Vaghasiya · Accepted Answer · 2013-11-22 12:39:44Z

0

working demo or jsFiddle here ( note: i update some your html format ).

html

<div style="margin-bottom:50px;">
    <div id="container">
        <div class="hack-overflow">
            <div class="data">you data here</div>
        </div>
    </div>
</div>


<div>
    <div id="container">
        <div class="hack-overflow">
            <div class="data">you data here</div>
            <div class="data">you data here</div>
            <div class="data">you data here</div>
            <div class="data">you data here</div>
            <div class="data">you data here</div>
            <div class="data">you data here</div>
            <div class="data">you data here</div>
            <div class="data">you data here</div>
            <div class="data">you data here</div>
        </div>
    </div>
</div>

css

#container{
    height: 375px;
    display: table-cell;
    width: 660px;
    vertical-align: bottom;
    margin:0 0 30px 0;
    background-color:#9C0;  
}

#container .hack-overflow{
    width:100%;
    height:auto;
    overflow:hidden;
    overflow-y:auto; 
    max-height:375px
}

#container .data{
    margin:0;
    width:660px;
    height:50px; 
    background-color:#F90; 
    border:#333 1px solid;
}

edited Nov 22, 2013 at 12:39

answered Nov 22, 2013 at 12:29

Vipul Vaghasiya

4791 gold badge5 silver badges16 bronze badges

1 Comment

user1763032 Over a year ago

This is not what I want.. Please check the Jsfiddle link I added in the question

Collectives™ on Stack Overflow

Overflow doesn't work when using display:table-cell

3 Answers 3

3 Comments

1 Comment

html

css

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

html

css

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related