为什么孩子的宽度不能展开为父母的宽度：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

与display: table-cell的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列更长，里面有很多文字。

浮动元素的常见解决方法是设置最小高度值。

如果最长内容的长度总是大致相同，但如果内容的长度差别很大，则不是可行的解决方案。

Here is a reference to this answer

---

运用规则，以你的答案：

---

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 fiddle