DIV 높이 디스플레이 표시 제한?

Question

문제 :

나는 (포함 된 사업부에서) display:tabledisplay:table-cell (부모 DIV에서) 사용이 수직으로 몇 가지 내용을 중심으로해야합니다. 콘텐츠가 수직으로 오버플로하는 경우를 제외하고는 정상적으로 작동합니다. 세로 오버플로가 발생하면 스크롤바가 나타나도록 높이를 제한하고 싶습니다.

바이올린 :

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

(출력에 그주의는 사업부가 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; 
}