＃緣起
在這篇文章中中途提及了在使用height: 100%;丟失的問題，具體表現為元素沒有高度，並不同我們預想中的元素高度為父元素的高度一致，這一問題進而引發了我的思考。
＃尋找
現在發現了這個問題，我們就要去試著尋找其原因，查詢了網上大多數的資料，通常描述此問題為高度計算無限遞歸問題，即未指定父元素的高度，父元素的高度是由子元素所稱開，但是此刻副元素的另一個子元素卻使用了height: 100%;就這樣父子之間不斷互相推斷，形成遞歸，進而造成子元素無法計算出高度問題。
＃解決
指定容器高度#
目前網上最為普遍的就是指定父容器的具體高度，避免造成遞歸現象。
看到上面的例子我們感覺到這個**指定容器高度**能解決問題，但是這種指定的形式太局限了，一般我們開發過程中大多數容器都是呈現靈活的大小，這樣**指定容器高度**解決方案就沒辦法解決了，恰如其分，下面的**Flex/Grid/-webkit-box布局**能夠解決動態高度問題。Flex/Grid/-webkit-box 布局#
這幾種布局都有一種共性，可以讓子元素動態解析高度，這個特性完全能夠解決上面的問題。
在 w3c 中是這樣描述該特性的：
Determine the used cross size of each flex item. If a flex item has align-self: stretch, its computed cross size property is auto, and neither of its cross-axis margins are auto, the used outer cross size is the used cross size of its flex line, clamped according to the item’s used min and max cross sizes. Otherwise, the used cross size is the item’s hypothetical cross size.
If the flex item has align-self: stretch, redo layout for its contents, treating this used size as its definite cross size so that percentage-sized children can be resolved.
恰巧，在flex/grid布局中其布局子項的align-self的默認值為stretch。
注意：此小標題所指 Flex/Grid/-webkit-box 包含有 flex/inline-flex/grid/inline-grid/-webkit-box/-webkit-inline-box
注意：如果 display: -webkit-box; 未顯示其.line 元素則是瀏覽器兼容性，請在 chrome 瀏覽器打開此示例
-webkit-box#
上面提及了display: -webkit-box;此屬性，我發現在很多地方都會使用到此屬性，例如多行文本省略號，還有此處的解決height: 100%;失效問題，但是好像我們根本沒去了解一下這個是個什麼東西，並且網上關於這個的資料也非常少，最多我就查到了 **-webkit-box這種布局是一個類似於Flex** 布局的東西，其他的毫無收獲了，查閱資料有點無從下手。
🐶機智的我發現網上搜索引擎沒找到相關資料後思索片刻找到了chatgpt，chatgpt也給到了合適的答案，
當使用
display: -webkit-box屬性時，它會將元素的顯示模式設置為基於盒子模型的布局方式。這種布局方式類似於彈性盒子（flexbox）布局，但是只適用於舊版本的 WebKit 瀏覽器。與其相關的屬性有: -webkit-box-orient、-webkit-box-pack、-webkit-box-align 等
這些屬性可以結合使用，以實現靈活的布局效果。然而，由於
-webkit-box屬性是 WebKit 瀏覽器特有的，並不是標準的 CSS 屬性，因此在現代瀏覽器中可能無法正常工作。為了更好地支持不同的瀏覽器，建議使用標準的display: flex或display: grid屬性來實現類似的布局效果。此 AI 回答僅供參考
這樣的答案目前能夠解釋通了為什麼-webkit-box也能解決height: 100%;丟失問題了，但是還是沒找到有什麼官方文檔解釋真正的權威解釋等，如果讀者您知道的話可以留言，感激不盡，謝謝。
＃參閱資料