爲什麼孩子的寬度不能展開爲父母的寬度：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