CSS display table doesn't respect fixed height

Question

I have this CSS layout which is necessary, cannot be changed so it preserves its middle centring.

Div display:table (height defined) with one div inside display:table-cell, both vertical-align:middle; (I use that for vertically centring of the content). The problem is that when the content overflows the defined height, it simply overflows the table, making it bigger.

I need to set something like overflow:hidden which doesn't seem to work with tables... I just need to hide the overflowing content or better, add scrollbar to table. Is there a way?

CSS

html,body {
  height: 100%;
}
.table {
  float:left;
  margin: 10px;
  display:table;
  height:500px;
  vertical-align:middle;
  background:#ccc;
}
.table-cell {
  vertical-align:middle;
  display:table-cell;
}

HTML

<div class="table">
  <div class="table-cell">
    some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>
  </div>
</div>
<div class="table">
  <div class="table-cell">
    some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>
  </div>
</div>

Codepen: http://codepen.io/anon/pen/lytea

Answer 1

The easiest way to do this is to wrap your content with a inline-block level element with max-height 100%, and, you need to set height: inherit on the table-cell elements.

html,body {
  height: 100%;
}
.table {
  float:left;
  margin: 10px;
  display:table;
  height:500px;
  vertical-align:middle;
  background:#ccc;
}
.table-cell {
  height: inherit;
  vertical-align:middle;
  display:table-cell;
}
.wrapper {
  border: 1px dotted blue;
  display: inline-block;
  max-height: 100%;
  overflow: auto;
}

<div class="table">
  <div class="table-cell">
    <div class="wrapper">
    some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>
</div>
    </div>
</div>
<div class="table">
  <div class="table-cell">
    <div class="wrapper">
    some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>
      </div>
  </div>
</div>