缘起#
在这篇文章中中途提及了在使用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%;丢失问题了，但是还是没找到有什么官方文档解释真正的权威解释等，如果读者您知道的话可以留言，感激不尽，谢谢.