Update 一句话说明如何使孙元素弹性获取高度.md

技术/瞎折腾/一句话说明如何使孙元素弹性获取高度.md

@@ -11,8 +11,10 @@ keywords: ['html', 'css']
 
 # 一句话说明如何使孙元素弹性获取高度
 
-- 父元素使用 `display: flex; flex-directrion: column;`
-- 子元素使用 `flex: 1 1 0px; min-height: 0px;` 或者 `flex: 1 1 content; min-height: 0px;`
-- 孙元素使用 `height: 100%;`
+背景： 在写一些通用的`Scroll`组件时，简单的一句`height: 100%`是无法从没有定高的父元素中获取高度的。
 
-PS：flex: 1 1 0px 不能缩写成 flex: 1，因为 flex: 1 实际上是 flex: 1 1 0%，在 flex-basis 是百分比时，是通过父元素的 height 来进行取值的，而此时父元素的 height 是 auto，所以子元素无法获得一个定高，也因此孙元素无法从 100% 继承到高度。
+- 父元素使用 `display: flex; flex-directrion: column;min-height: 100px;`，其中 min-height 也可以换成`flex: 1; min-height: 0px;`，来充满爷容器的剩余高度。
+- 子元素使用 `flex: 1 1 0px; min-height: 0px;`
+- 孙元素使用 `height: 100%; overflow: auto;`
+
+PS：子元素的 flex: 1 1 0px 不能缩写成 flex: 1，因为 flex: 1 实际上是 flex: 1 1 0%，在 flex-basis 是百分比时，是通过父元素的 height 来进行取值的，而此时父元素的 height 是 auto，所以子元素无法获得一个定高，也因此孙元素无法从 100% 继承到高度。只有当 flex-basis 设定为 0px，它才会动态去取父元素的高度。而此时孙元素就是一个高度继承于父组件可滚动的盒子了。