Vertical scroll on vertically centered div with dynamic height - html

Question

I use display:table and vertical-align:middle to vertically center a div with dynamic height.
CSS
.table {
display:table;
height: 100%;
width: 100%;
}
.cell {
display: table-cell;
vertical-align: middle;
text-align:center;
}
.content {
display: inline-block;
width: 100px;
overflow-y: auto; /* Useless */
}
HTML
<div class="table">
<div class="cell">
<div class="content">
Then this text becomes too long, it will cause
the .table div to expand beyond its container
even if set to height: 100%
</div>
</div>
</div>
How do I get the content div to get a vertical scroll when its height becomes greater than the table div (or rather the table div's parent)?
JS Fiddle example

Answer 1

Instead of a CSS tables approach, you can use the Centering in the unknown approach:
.cell, .cell:before {
height: 100%;
}
.cell:before {
content: '';
margin-right: -0.25em; /* Adjusts for spacing */
}
.cell:before, .cont {
vertical-align: middle;
display: inline-block;
}
.cont {
max-height: 100%;
overflow-y: auto;
}
.margin {
position: absolute;
left: 32px;
right: 32px;
top: 32px;
bottom: 32px;
background: yellow;
text-align: center;
}
.cell, .cell:before {
height: 100%;
}
.cell:before {
content: '';
margin-right: -0.25em; /* Adjusts for spacing */
}
.cell:before, .cont {
vertical-align: middle;
display: inline-block;
}
.cont {
width: 240px;
padding: 0px 12px;
background: #ddd;
text-align: left;
border: 1px solid #000;
max-height: 100%;
overflow-y: auto;
}
<div class="margin">
<div class="cell">
<div class="cont">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla cursus lacinia ipsum quis pharetra. Donec vitae quam placerat lectus lobortis congue. Suspendisse maximus euismod aliquam. Ut sagittis risus vitae mauris imperdiet, ac venenatis orci dignissim. Nam felis dui, commodo non venenatis in, pulvinar a lectus. Duis lacus nulla, fringilla ut malesuada vel, iaculis ut dui. Nunc venenatis imperdiet tortor, eu sollicitudin velit vulputate finibus. In placerat justo lacus, quis faucibus leo varius ornare. Mauris vestibulum ligula in est pellentesque commodo. Donec sollicitudin dui quis quam pretium, eget sollicitudin risus pellentesque. Duis eget lacus varius, finibus augue ac, auctor eros. Proin vestibulum mauris vitae urna volutpat, non ultrices felis ultricies.</p>
</div>
</div>
</div>

Answer 2

You can add a .row element:
<div class="table">
<div class="row">
<div class="cell">
<div class="content">Long text</div>
</div>
</div>
</div>
With this CSS:
.table {
display: table;
height: /* something */;
}
.row {
display: table-row;
height: 100%;
}
.cell {
display: table-cell;
height: 0;
}
.cont {
max-height: 100%;
overflow-y: auto;
}
This reduces the height of .cell as much as possible –making .cont overflow–, but since .row has height: 100%, it will cover .table.
.margin {
position: absolute;
left: 32px;
right: 32px;
top: 32px;
bottom: 32px;
background: yellow;
}
.table {
display: table;
width: 100%;
height: 100%;
}
.row {
display: table-row;
height: 100%;
}
.cell {
display: table-cell;
vertical-align: middle;
text-align: center;
height: 0;
}
.cont {
width: 240px;
padding: 0px 12px;
background: #ddd;
display: inline-block;
text-align: left;
border: 1px solid #000;
max-height: 100%;
overflow-y: auto;
}
<div class="margin">
<div class="table">
<div class="row">
<div class="cell">
<div class="cont">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla cursus lacinia ipsum quis pharetra. Donec vitae quam placerat lectus lobortis congue. Suspendisse maximus euismod aliquam. Ut sagittis risus vitae mauris imperdiet, ac venenatis
orci dignissim. Nam felis dui, commodo non venenatis in, pulvinar a lectus. Duis lacus nulla, fringilla ut malesuada vel, iaculis ut dui. Nunc venenatis imperdiet tortor, eu sollicitudin velit vulputate finibus. In placerat justo lacus, quis
faucibus leo varius ornare. Mauris vestibulum ligula in est pellentesque commodo. Donec sollicitudin dui quis quam pretium, eget sollicitudin risus pellentesque. Duis eget lacus varius, finibus augue ac, auctor eros. Proin vestibulum mauris
vitae urna volutpat, non ultrices felis ultricies.</p>
</div>
</div>
</div>
</div>
</div>

Answer 3

An alternative to achieve the same effect is to use display: flex instead of display: table
.flex {
position:absolute;
left:32px; right:32px; top:32px; bottom:32px;
display: flex;
align-items: center;
justify-content: center;
background:yellow;
}
.item {
max-height: 100%;
box-sizing: border-box;
width: 264px;
padding: 0px 12px;
background: #ddd;
border: 1px solid #000;
overflow:auto;
}
<div class="flex">
<div class="item">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla cursus lacinia ipsum quis pharetra. Donec vitae quam placerat lectus lobortis congue. Suspendisse maximus euismod aliquam. Ut sagittis risus vitae mauris imperdiet, ac venenatis orci dignissim. Nam felis dui, commodo non venenatis in, pulvinar a lectus. Duis lacus nulla, fringilla ut malesuada vel, iaculis ut dui. Nunc venenatis imperdiet tortor, eu sollicitudin velit vulputate finibus. In placerat justo lacus, quis faucibus leo varius ornare. Mauris vestibulum ligula in est pellentesque commodo. Donec sollicitudin dui quis quam pretium, eget sollicitudin risus pellentesque. Duis eget lacus varius, finibus augue ac, auctor eros. Proin vestibulum mauris vitae urna volutpat, non ultrices felis ultricies.</p>
</div>
</div>
This works in Chrome (v39), Firefox (v36), and IE11. However, IE11 doesn't seem to regrow the item div once the scrollbar has been added, even if there is space for it.

Answer 4

It's not the .table div that expands beyond its container. It's the .cont div.
.cont {
width: 240px;
padding: 0px 12px;
background: #ddd;
display: inline-block;
text-align: left;
border: 1px solid #000;
overflow:auto;
}
Nothing in this class limits the height to 100%, so the .cont div will expand beyond the borders of .table
Just add max-heigh:100% to limit it to 100% of the parent's (.cell) height. And then the overflow:auto (that was already there) should do the rest of the job
http://jsfiddle.net/0q78gbvh/1/
EDIT: This will not work in all browsers, because you can't set the max-height from display:table directly in those browsers.

Answer 5

Is this what you are looking for?
Since you have a <p> element in ur jsFiddle Eg, set a max height to the container equal to the .margin
.cont {
width: 240px;
padding: 0px 12px;
background: #ddd;
display: inline-block;
text-align: left;
border: 1px solid #000;
max-height:300px; /* Fixed max-height of container... */
overflow-y:scroll;
}
JSFiddle Example