If you are using display: table, display: table-row and display: table-cell in CSS to structure your HTML, then restricting the height of a content cell is difficult. If you want to have a content cell scroll correctly vertically, when the content of a cell exceeds the height of the table, like cell 2 in the following screen dump:




Then you can use a “relative” positioned div inside the table-cell and in the relative positioned div a absolute positioned div. This div should get the overflow-y property, like:

<div class="table" style="height: 100%;">
    <div class="row">
        <div class="cell" style="border: 1px solid #000000; padding: 10px;">Cell 1</div>
        <div class="cell" style="border: 1px solid #000000; padding: 10px;">
            <!-- Use inner div's with position relative and absolute, to fix cell height,
                 making it overflow correctly. -->
            <div style="position:relative; height: 100%">
                <div style="overflow-y: scroll; position: absolute; top: 0; right:0; bottom: 0; left: 0;">

To see the code live: http://plnkr.co/edit/HWTsCsUpddHP3rZsMUtz?p=preview

6 Replies to “Fix table-cell height overflow-y (scroll) in a CSS 3 full page 100% height layout”

  1. it works in chrome. Please give me a solution for F*****g IE8 above
    the below way also works fine in chrome, Not in IE



    Thank you
    Rooban Nadarajah

  2. I tried this in Firefox Quantum 57.0.4 and the text in the scrollable cell is not shown. What could be the problem?

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Related Posts