height: 100% for <div> inside <div> with display: table-cell

Question

Here is 2 column markup using display: table and display: table-cell CSS declarations:

 .table { display: table; } .cell { border: 2px solid black; vertical-align: top; display: table-cell; } .container { height: 100%; border: 2px solid green; } 

 <div class="table"> <div class="cell"> <p>Text <p>Text <p>Text <p>Text <p>Text <p>Text <p>Text <p>Text </div> <div class="cell"> <div class="container">Text</div> </div> </div> 

But .container block does not fill parent cell vertically. Here is an example on JsFiddle: http://jsfiddle.net/MGRdP/2 .

What I have | What I need

Please, do not propose JS solution.

Answer 1

When you use % for setting heights or widths, always set the widths/heights of parent elements as well:

 .table { display: table; height: 100%; } .cell { border: 2px solid black; vertical-align: top; display: table-cell; height: 100%; } .container { height: 100%; border: 2px solid green; -moz-box-sizing: border-box; } 

 <div class="table"> <div class="cell"> <p>Text <p>Text <p>Text <p>Text <p>Text <p>Text <p>Text <p>Text </div> <div class="cell"> <div class="container">Text</div> </div> </div> 

Answer 2

set height: 100%; and overflow:auto; for div inside .cell

Answer 3

table{
   height:1px;
}

table > td{
   height:100%;
}

table > td > .inner{
   height:100%;
}

Confirmed working on:

• Chrome 60.0.3112.113, 63.0.3239.84
• Firefox 55.0.3, 57.0.1
• Internet Explorer 11

Answer 4

In Addition to jsFiddle, I can offer an ugly hack if you wish in order to make it cross-browser (IE11, Chrome, Firefox).

Instead of height:100%; , put height:1em; on the .cell .

Answer 5

This is exactly what you want:

HTML

<div class="table">

    <div class="cell">
        <p>Text</p>
        <p>Text</p>
        <p>Text</p>
        <p>Text</p>
        <p>Text</p>
        <p>Text</p>
        <p>Text</p>
        <p>Text</p>
    </div>
    <div class="cell">
        <div class="container">Text</div>
    </div>
</div>

CSS

.table {
    display: table;
    height:auto;
}

.cell {
    border: 2px solid black; 
    display:table-cell;
    vertical-align:top;
}

.container {
    height: 100%;
    overflow:auto;
    border: 2px solid green;
    -moz-box-sizing: border-box;
}

Answer 6

Make the the table-cell position relative, then make the inner div position absolute, with top/right/bottom/left all set to 0px.

.table-cell {
  display: table-cell;
  position: relative;
}

.inner-div {
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
}

Answer 7

Define your .table and .cell height:100%;

    .table {
        display: table;
        height:100%;
    }

    .cell {
        border: 1px solid black;
        display: table-cell;
        vertical-align:top;
height: 100%;

    }

    .container {
        height: 100%;
        border: 10px solid green;

    }

Demo