关于css的height:100%

这个问题，今天还搞了我两个小时，也是基础没搞好，再回顾了一下

问题描述：客户提出，在弹窗的时候就没办法滚动页面了，客户希望还可以滚动父页面。

基于这个问题，我想，本来就是可以滚动的呀，记得之前的项目都是可以滚动的，为什么这个不行呢。开始排查，一个一个开始排，拿到官网的例子开始搞，不生效，那必然是项目影响了。

项目的全局css配置文件

html,
body,
body > #app {
  width: 100%;
  height: 100%; /**这里我犯了一个错误，我以为这个100%不会起作用，甚至于没有意义 */
  margin: 0;
  padding: 0;
  /* overflow: hidden; */
  font-family: PingFang SC, Helvetica Neue, Helvetica, microsoft yahei, arial, STHeiTi, sans-serif;
}

遗漏知识点：html的height: 100%代表的视口高度，100vh(html 的父元素其实就是浏览器的 视口 (viewport))
这个时候，我发现我的弹框所在组件class=“overflow-x-auto min-w-full h-[100%] bg-gray-50 flex flex-col gap-2 p-4”
它继承了父组件的高度100%，也就是全局的视口高度100vh。在弹框弹出时，父组件100vh，不会有滚动，即使子内容的高度超过了100vh，把h-[100%]去掉，使得父元素高度由子元素撑开，这个时候弹窗的时候页面就也可以滚动了，