求助：CSS Flexbox实现两列不同高度布局的问题

我明白你想要实现的是左右两列高度随内容自适应的布局，当前代码没达到预期效果的核心原因是：当使用flex-direction: column + flex-wrap: wrap时，flex容器需要有明确的高度限制才会触发元素换行到右侧列，但这种固定容器高度的方式很难实现“列高随内容自适应”的需求。

下面给你两种更合适的解决方案：

方案一：拆分左右列容器（直观可控） #

把左列和右列的元素分别包裹在独立容器中，外层flex容器控制两列宽度比例，内层容器垂直排列元素。这样每列的高度会自动适配自身内容的总高度，完美实现“两列不同高度”的效果。

修改后的HTML： #

<div class="wrapper container">
  <div class="left-column">
    <div class="a">A</div>
    <div class="c">C</div>
    <div class="e">E</div>
  </div>
  <div class="right-column">
    <div class="b">B</div>
    <div class="d">D</div>
    <div class="f">F</div>
  </div>
</div>

修改后的CSS： #

.wrapper {
  display: flex;
  /* 如需列间距可添加 gap: 10px; 这里保持原代码无间距 */
}
.left-column {
  width: 65%;
  display: flex;
  flex-direction: column;
}
.right-column {
  width: 35%;
  display: flex;
  flex-direction: column;
}
.a { background-color: red; }
.b { background-color: green; }
.c { background-color: blue; height: 100px; }
.d { background-color: orange; }
.e { background-color: teal; }
.f { background-color: purple; }

方案二：用CSS Grid实现（简洁高效） #

如果不需要严格局限于Flexbox，CSS Grid能更轻松达成需求，只需定义两列宽度比例，元素会自动按顺序填充到对应列，HTML结构无需改动。

CSS代码： #

.wrapper {
  display: grid;
  grid-template-columns: 65% 35%; /* 定义两列宽度比例 */
  grid-auto-flow: row dense; /* 确保元素按顺序填充，避免空单元格 */
}
.a { background-color: red; grid-column: 1; }
.b { background-color: green; grid-column: 2; }
.c { background-color: blue; grid-column: 1; height: 100px; }
.d { background-color: orange; grid-column: 2; }
.e { background-color: teal; grid-column: 1; }
.f { background-color: purple; grid-column: 2; }

两种方案都能满足你的需求：方案一更适合需要对列内元素做额外Flex布局控制的场景，方案二更简洁省心。

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