限制標有顯示的div的高度：table-cell？

Question

問題：

我需要使用display:table（父DIV）和display:table-cell（在包含DIV）垂直居中某些內容。除非內容垂直溢出，否則這是行得通的。我想限制高度，以便在出現垂直溢出時顯示滾動條。

小提琴：

http://jsfiddle.net/PTSkR/110/

（請注意，在輸出時，DIV是，儘管我的垂直擴展設置高度160像素）

CSS：

side-study-box { 
    background-color: white; 
    color: black; 
    border: 1px solid #3D6AA2; 
    text-align: center; 
    height: 160px !important; 
    display: table !important; 
    margin: 0px !important; 
    margin-left: -1px !important; 
    position: relative; 
    overflow-y: scroll; 
    width: 100%; 
} 

    .side-study-box .side-box-content { 
     width: calc(100%); 
     height: 160px !important; 
     float: right; 
     display: table; 
     overflow-y: scroll; 
    } 

    .side-study-box .text-content-saved { 
     width: 100% !important; 
     font-size: 24px; 
     display: table-cell; 
     vertical-align: middle; 
     text-align: center; 
     height: 160px !important; 
     max-height: 160px !important; 
     background-color: white; 
     padding: 0px !important; 
     margin: 0px !important; 
     font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif; 
     border: 0px !important; 
     overflow-y: scroll; 
    } 

Answer 1

這裏是你的小提琴更新，與最大他在內容包裝上。

.side-study-box { 
    background-color: white; 
    color: black; 
    border: 1px solid #3D6AA2; 
    display: table; 
    width: 100%; 
    border-spacing:1em; 
} 
.side-box-content { 
width: 100%; 
    height: ; 
    display: table-cell; 
} 
.text-content-saved { 
    max-height:160px; 
    overflow:auto; 
    padding:5px; 
} 

http://jsfiddle.net/GCyrillus/6tLAu/

在這裏第一個代碼是：框不會增長。
下面這裏第二個先做和中心內容如果很少。

.side-study-box { 
    background-color: white; 
    color: black; 
    border: 1px solid #3D6AA2; 
    display: table; 
    width: 100%; 
    border-spacing:1em; 
    height:160px; 
} 
.side-box-content { 
width: 100%; 
    height: ; 
    display: table-cell; 
    vertical-align:middle; 
} 
.text-content-saved { 
    max-height:140px; 
    overflow:auto; 
    padding:5px; 
}