Flexbox是否支持嵌套？嵌套后内部元素不显示问题求助

问题原因 #

• HTML标签未闭合：给出的HTML片段里所有div都只有起始标签，没有闭合的</div>，浏览器解析结构出错会导致内部元素不渲染。
• 父容器无明确尺寸：.left容器没有设置宽高，内部子元素的百分比宽高没有计算参照，无法正常展示。
• CSS注释语法错误：CSS里用了HTML的注释格式<!-- -->，不符合CSS规范，会导致后续的宽高样式失效，.pos-inside和.icon-1的样式根本没有被浏览器识别。
• 元素无可见内容/背景：.icon-1仅设置了文字颜色color，既没有内容也没有背景色，空元素自然看不到。

修正方案 #

可以参考下面的修改后的代码调整：

修正后HTML

<div class="stack-1">
  <div class="flexbox">
    <div class="left">
      <div class="flex-inside">
        <div class="pos-inside">
          <div class="icon-1"></div>
        </div>
      </div>
    </div>
    <div class="right">
      <div class="flex-right">
        <!-- 粉色div内部的内容可自行补全 -->
      </div>
    </div>
  </div>
</div>

修正后CSS

.stack-1{
    display:flex;
    background:green;
    /* 给最外层父容器加高度，方便子元素百分比计算 */
    height: 200px;
}
.flexbox{
    display: flex;
    background: purple;
    margin-left: 20px;
    margin-right: 20px;
    width: 100%;
    height: 100px;
}
.left,.right{
    /* 左右两个容器各占一半宽度 */
    width: 50%;
}
.left{
    background-color: brown;
}
.right{
  justify-content: flex-end;
  display: flex;
  background-color: aqua;
}
.flex-inside{
  justify-content: center;
  display: flex;
  align-items: center;
  background: navy;
  width: 60%;
  height: 30px;
}
.flex-right{
  background: hotpink;
  width: 60%;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.pos-inside{
  background: orange;
  width: 40%;
  height: 20px;
  display: flex;
  align-items: center;
}
.icon-1{
  background: purple;
  width: 10%;
  height: 50%;
}

调整后嵌套的flex元素即可正常渲染，嵌套flex的逻辑和普通flex确实一致，只要父容器有明确的尺寸、结构正确、样式语法无问题就能正常生效。

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