CSS-Flexbox多列场景下子元素占满父高并排失效问题

咱们来一步步拆解你遇到的问题，其实核心是两个小失误导致的：

1. Flex方向设置错了：你的#page容器用了flex-flow: column，这会强制子元素垂直堆叠，而不是你想要的并排显示。
2. 重复使用ID：HTML里ID是唯一标识，你重复写了两个#content，这不仅不符合规范，还可能让样式逻辑混乱，得改成class才行。

下面是修正后的完整代码，我会把调整点都标注清楚：

修正后的CSS #

#snippet-container { 
  height: 300px; 
  width: 200px; 
}
#page { 
  display: flex; 
  flex-flow: row; /* 把column改成row，让子元素水平并排 */
  height: 100%; 
  gap: 8px; /* 可选：给两个盒子之间加间距，看着更舒服 */
}
.content { /* 把ID改成class，避免重复ID问题 */
  flex: 1; /* 让每个content自动平分父容器宽度，比固定50%更灵活 */
  display: flex; 
  height: 100%; 
  background: blue; 
  /* 去掉固定width:50%，用flex:1自适应分配宽度 */
}
.content .test { 
  width: 100%; 
  height: 100%; 
  background: yellow; 
  border: 2px solid red; 
  box-sizing: border-box; /* 让边框算在元素尺寸里，防止溢出父容器 */
}

修正后的HTML #

<div id="snippet-container">
  <div id="page">
    <div class="content">
      <div class="test"></div>
    </div>
    <div class="content">
      <div class="test"></div>
    </div>
  </div>
</div>

关键调整说明： #

• 把#page的Flex方向从垂直改成水平，直接解决了盒子堆叠的问题；
• 用flex:1代替固定宽度，让每个内容盒子自动平分父容器的可用空间，后续加更多列也不用手动改宽度；
• 加上box-sizing: border-box，确保红色边框不会让黄色盒子超出蓝色容器的范围；
• 修正重复ID的问题，保证HTML结构符合标准，避免后续出现样式或脚本错误。

这样调整后，两个黄色盒子就会并排显示，并且完全占满父容器的高度和各自的宽度啦～

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