flex-wrap不生效子项不换行，容器异常增高的CSS解决方案咨询

要实现纵向flex容器子项自动换行，且高度匹配右侧文本区域，需要调整以下CSS属性：

• 外层flex容器（包裹左右两部分的div）默认align-items: stretch，确保左侧容器高度与右侧文本区域一致。
• 左侧纵向flex容器设置height: 100%，将其高度限制为右侧文本区域的高度，触发子项在垂直空间不足时换行。
• 为左侧容器添加flex: 1，让它占据父容器剩余水平空间，避免宽度被子项过度撑开，同时给换行后的子项足够的列空间。

修改后的代码如下：

<div style="background-color: #aaa;">
  <div style="display: flex;">
    <div style="display: flex; flex-direction: column; flex-wrap: wrap; height: 100%; flex: 1;">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
    </div>
    <div style="width: 300px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
  </div>
</div>

关键说明 #

1. height: 100%：强制左侧纵向flex容器的高度与父容器（由右侧文本区域决定）一致，子项在垂直方向排满后会触发flex-wrap: wrap换行到下一列。
2. flex: 1：让左侧容器占据父容器的剩余水平空间，确保换行后的子项有足够的宽度显示，避免容器宽度被单个子项限制。
3. flex-direction: column + flex-wrap: wrap：纵向排列子项，垂直空间不足时自动在水平方向创建新列。

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