cssでdisplay:table-cell;した要素の子要素のheightを100%表示

Question

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

.table {
    display: table;
}

.cell {
    border: 2px solid #000;
    display: table-cell;
}
.wrap{
    border: 2px solid #000;
}

このようなhtmlで、wrapは自動的にheightが0に設定されてしまいます。
http://stackoverflow.com/questions/22220698/height-100-for-div-inside-div-with-display-table-cell
このようにする事でwrapのheightが100%になる事は分かったのですが、そうすると外側のtableまで100%になってしまうので使えません。
tableに100%を設定せずに、wrapの高さを100%にする方法はありませんでしょうか。

Answer 1

親要素の高さをpxで指定する事で100%にできませんでしたっけ？

Answer 2

原則的に table-cellの高さ <= table の高さ です。
内包しているtable-cellの高さがtable以上になることはありません。

強引ですがやれないことはない、という方法。

.table {
    display: table;
}

.cell {
    border: 2px solid #000;
    display: table-cell;
    position: relative;
}
.wrap{
    position: absolute;
    height: 100%;
    top: -2px;
    border: 2px solid #000;
}

display: tableだと限界があるので、flexを使った方法。
CSS3を使うのであれば、こちらのアプローチを考えた方が良いかと思います。

CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説

.table,
.cell {
    display: flex;
}

.table {
   flex-wrap: wrap;
}

.cell {
    flex-direction: column;
    border: 2px solid #000;
}
.wrap{
  border: 2px solid #000;
  flex-grow: 1;
}

Comments

[SasakiAkira]

それはわかるのですが、wrapの高さを100%にして、tableには例えば100pxなどの値を設定したい、ということです。

[yamato_hikawa]

回答に追記しました。