html - css - 溢出 : hidden in div nested inside display: table-cell

Question

我在嵌套在另一个具有 display: table-cell 样式的 div 中的 div 中遇到溢出问题。我不确定为什么 #left-wrapper 的内容在超过 #left-wrapper 的高度时不会被裁剪(隐藏)。在此先感谢您的任何建议。 fiddle 链接:http://jsfiddle.net/bpbHY/1/

这是我的标记:

<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%;
}

Answer 1

overflow: hidden 不起作用，因为您正在使用 display: table 和 display: table-cell。我还使用定位来使#center 居中。

这是 working fiddle

PS:我正在使用 min-width: 200px，您可能希望根据需要进行更改。