Restrict height of div marked with display:table-cell? - css

Question

Problem:
I need to use display:table (in the parent div) and display:table-cell (in the contained div) to center some content vertically. This is working except when the content overflows vertically. I want to restrict the height so that a scrollbar appears if there's any vertical overflow.
Fiddle:
http://jsfiddle.net/PTSkR/110/
(Note that in the output, the div is expanded vertically despite me setting the height to 160px)
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

here is your fiddle updated , with max-height on content wrapper.
.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/
up here first code was : the box doesn't grow.
down here second does first and centers content if little.
.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;
}