css - overflow: hidden in div nested inside display: table-cell

Question

I've got a problem with overflow in a div nested inside another div which has display: table-cell style. I'm not sure why content from #left-wrapper is not cropped (hidden) when it exceeds height of #left-wrapper. Thanks in advance for any advices. Fiddle link: http://jsfiddle.net/bpbHY/1/

Here's my markup:

<div id="wrapper">
    <div id="left">
        <div id="left-wrapper">
            <ul>
                <li>Menu item</li>
                <li>Menu item</li>
                <li>Menu item</li>
                <li>Menu item</li>
                <li>Menu item</li>
                <li>Menu item</li>
                <li>Menu item</li>
                <li>Menu item</li>
                <li>Menu item</li>
                <li>Menu item</li>
                <li>Menu item</li>
                <li>Menu item</li>
                <li>Menu item</li>
                <li>Menu item</li>
                <li>Menu item</li>
                <li>Menu item</li>
                <li>Menu item</li>
                <li>Menu item</li>
                <li>Menu item</li>
                <li>Menu item </li>
            <ul>
        </div>
    </div>
    <div id="center">Center content</div>
    <div id="right">right</div>
</div>

CSS:

#wrapper {
    display:table;
    width:100%;
    height:100%;
}
#wrapper > div {
    display:table-cell;
    height:100%;
}
#left {
    width:70px;
    min-width:80px;
    height: 100%;
    background-color:pink;
}

#left-wrapper {
    overflow: hidden;
    height: 100%;
}

#center {
    background-color:green;
    min-width:200px;
}
#right {
    width:50px;
    min-width:50px;
    background-color:red;
}
li {
    line-height: 80px;
}
body, html {
    width:100%;
    height:100%;
}

I don't see any problem... If i change the #left-wrapper's hight, it get's croped... — Barnee
– Barnee, Commented Aug 13, 2013 at 9:21
I'd like to make content of #left scrollable (using IScroll), so I need to crop/hide just the content of #left-wrapper. — krlm
– krlm, Commented Aug 13, 2013 at 9:22
Also, you may want to close your ul tags, you have a second opening tag instead of a closing tag. — leigero
– leigero, Commented Aug 13, 2013 at 10:50

Mr_Green · Accepted Answer · 2013-08-13 10:44:36Z

1

The overflow: hidden is not working because you are using display: table and display: table-cell. and also I used positioning to center the #center.

Here is the working fiddle

PS: I am using min-width: 200px which you might want to change as your need.

answered Aug 13, 2013 at 10:44

Mr_Green

42k48 gold badges171 silver badges277 bronze badges

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

1 Comment

krlm Over a year ago

Thanks for your solution. I'd be happy if somebody could send me to the css reference where I could read about that issue.

leigero · Accepted Answer · 2013-08-13 10:48:08Z

I think this problem is occurring because of your use of display: table; and table-cell

I've taken the liberty of re-designing the CSS you have and I think this is what you're looking for:

Html stays the same and the CSS is as follows:

* {margin:0;padding:0;}
html, body{
    height:100%;
    width: 100%;
}
li {
    line-height: 80px;
}
#wrapper{
    width: 100%;
}
#left-wrapper {
    background: pink;
    width: 15%;
    height: 100%;
    float: left;
}
#left-wrapper ul {
    height: 100%;
    overflow: scroll;
    background: pink;
}

#center {
    background-color:green;
    height: 100%;
    width: 70%;
    min-width:200px;
    float: left;
}
#right {
    width: 15%;
    min-width:50px;
    height: 100%;
    background-color:red;
    float: left;
}

Pumpkinpro · Accepted Answer · 2013-08-13 09:19:36Z

0

I am not sure , but maybe this will be useful for you:

li {
line-height: 80px;
overflow: hidden;
width: 100%;
height: 80px;
}

jsfiddle

answered Aug 13, 2013 at 9:19

Pumpkinpro

8474 silver badges5 bronze badges

3 Comments

krlm Over a year ago

Not really, menu items are still expanding the height of #left-wrapper/#wrapper

krlm Over a year ago

I've checked in Chrome and Firefox (most current)

Pumpkinpro Over a year ago

I misunderstood your question, but i think you need to use javascript to set get wrapper height and apply it to left-wrapperor something like that

Ali Çarıkçıoğlu · Accepted Answer · 2013-08-13 10:14:02Z

0

After this, set listitems as overflow: scroll; it should work.

http://jsfiddle.net/bpbHY/8/

edited Aug 13, 2013 at 10:14

answered Aug 13, 2013 at 9:53

Ali Çarıkçıoğlu

1,3051 gold badge12 silver badges22 bronze badges

1 Comment

krlm Over a year ago

Which element should have this overflow: scroll in my case? (I'd like to avoid browser scroll, overflow: hidden will be just enough for me)

Collectives™ on Stack Overflow

css - overflow: hidden in div nested inside display: table-cell

4 Answers 4

1 Comment

Comments

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related