 <p>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 <code>height: inherit</code> on the <code>table-cell</code> elements.</p> <p><div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>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; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="table"&gt; &lt;div class="table-cell"&gt; &lt;div class="wrapper"&gt; some tall content &lt;br&gt;some tall content &lt;br&gt;some tall content &lt;br&gt;some tall content &lt;br&gt;some tall content &lt;br&gt;some tall content &lt;br&gt;some tall content &lt;br&gt;some tall content &lt;br&gt;some tall content &lt;br&gt;some tall content &lt;br&gt;some tall content &lt;br&gt;some tall content &lt;br&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="table"&gt; &lt;div class="table-cell"&gt; &lt;div class="wrapper"&gt; some tall content &lt;br&gt;some tall content &lt;br&gt;some tall content &lt;br&gt;some tall content &lt;br&gt;some tall content &lt;br&gt;some tall content &lt;br&gt;some tall content &lt;br&gt;some tall content &lt;br&gt;some tall content &lt;br&gt;some tall content &lt;br&gt;some tall content &lt;br&gt;some tall content &lt;br&gt;some tall content &lt;br&gt;some tall content &lt;br&gt;some tall content &lt;br&gt;some tall content &lt;br&gt;some tall content &lt;br&gt;some tall content &lt;br&gt;some tall content &lt;br&gt;some tall content &lt;br&gt;some tall content &lt;br&gt;some tall content &lt;br&gt;some tall content &lt;br&gt;some tall content &lt;br&gt;some tall content &lt;br&gt;some tall content &lt;br&gt;some tall content &lt;br&gt;some tall content &lt;br&gt;some tall content &lt;br&gt;some tall content &lt;br&gt;some tall content &lt;br&gt;some tall content &lt;br&gt;some tall content &lt;br&gt;some tall content &lt;br&gt;some tall content &lt;br&gt;some tall content &lt;br&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt;</code></pre> </div> </div> </p>