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>