给.panel内h3添加position:absolute后HTML页面白屏问题求助

问题原因 #

1. position: absolute会让元素完全脱离正常文档流，你给h3添加该属性后，它不再占据.panel的内部空间，此时.panel内部没有任何正常流内容可以撑开自身宽度。
2. .panel作为flex布局的子项，你写的flex: .5是flex属性的简写形式，按照CSS规范，仅带无单位数值的写法会被解析为 flex-grow: 0.5; flex-shrink: 1; flex-basis: 0%，也就是说每个.panel的默认基础宽度为0。
3. 外层.container作为flex容器，你只设置了max-width: 90vw没有设置明确的width属性，flex容器未指定宽度时，默认总宽度由所有子项的内容宽度总和决定。现在所有子项的基础宽度都是0，也没有内容撑开宽度，整个.container的宽度就会收缩为0，所有.panel都没有可显示的宽度，就会出现白屏。
4. 缩小视口后元素突然出现，是因为浏览器在视口尺寸变化时触发了重新布局计算，flex-grow的分配逻辑被重新执行，才按照比例分配了宽度。

解决方案 #

可以任选以下任意一种方案修复：

• 给.panel添加最小宽度限制，保证就算没有内容撑宽也有基础宽度，撑住flex容器的总宽度：

.panel {
  /* 原有属性不变，新增如下属性 */
  min-width: 60px;
}

• 修改.panel的flex属性，明确指定flex-basis为固定值，而非默认的0%：

.panel {
  /* 把原有flex: .5替换为下面的写法 */
  flex: 0.5 1 80px;
}

• 给外层.container设置明确的宽度，代替原来的max-width配置，让flex容器有确定的总宽度用于分配：

.container {
  /* 原有属性不变，替换max-width为如下属性 */
  width: 90vw;
}

内容的提问来源于stack exchange，提问作者shaderone