なぜ、子の幅が表示で親の幅に拡大しないのですか？table-cell？

Question

div { 
 
    width: 100px; 
 
    height: 100px; 
 
} 
 
p { 
 
    margin: 0px; 
 
    padding: 0px; 
 
    display: table-cell; 
 
    width: 100%; 
 
    height: 100%; 
 
    border: 1px solid green; 
 
}

<div> 
 
    <p>hello</p> 
 
</div>

今ここに子要素pは、なぜ、その親の幅とheight: 100pxに展開しないのですか？ display: table-cellがdisplay: tableなどに変更された場合、blockの場合、 子要素<p>は、親のwidthとheight :100pxに展開されます。

div { 
 
    width: 100px; 
 
    height: 100px; 
 
} 
 
p { 
 
    margin: 0px; 
 
    padding: 0px; 
 
    display: table; 
 
    width: 100%; 
 
    height: 100%; 
 
    border: 1px solid green; 
 
}

<div> 
 
    <p>hello</p> 
 
</div>

ここにアクションを説明するためのルールがありますか？

Answer 1

pは、匿名のテーブルボックス（§17.2.1 Anonymous table objects）に、匿名のテーブル行ボックスにレンダリングさdiv（次になり、この匿名のテーブルボックスの包含ブロック）内。

テーブルボックスは、デフォルトでは包含ブロックの幅に拡張されません（§17.5.2 Table width algorithms: the 'table-layout' property）。これは匿名のテーブルボックス、HTML tableの要素、およびdisplay: tableの要素の場合に当てはまります。

Answer 2

ルールあなたは、ディスプレイを宣言した場合、

を尋ねた：テーブルの行とディスプレイ：テーブル、テーブルセルを、あなたはディスプレイ付きの要素の中に巣にそれを持っています。実際のテーブルのように。

The link which says about that usage

テーブルセルの説明：

---

table-cell:要素は、テーブル・セル列との高さを使用して<td>要素

のように動作してみましょう：

表セル列は、行内の最大の列の高さに一致するように展開されます。高さはコンテンツによって定義され、明示的な固定高さではありません。

列1列2は少し長いです。列3には長いテキストが含まれています。

浮動要素の一般的な回避策は、最小高さの値を設定することです。

これは、最も長いコンテンツの長さが常にほぼ同じである場合に有効ですが、コンテンツの長さが大きく異なる場合は実行可能なソリューションではありません。

---

div { 
 
    width: 100px; 
 
    height: 100px; 
 
    display: table; 
 
} 
 
p { 
 
    margin: 0px; 
 
    padding: 0px; 
 
    display: table-cell; 
 
    width: 100%; 
 
    height: 100%; 
 
    border: 1px solid green; 
 
}

<div> 
 
    <p>Test</p> 
 
</div>

---

：あなたの答えにルールを適用する

Here is a reference to this answer

---

display: table-cellと3210