Flex布局中等高列未生效：如何实现响应式等高布局？

要让所有带红色边框的.text元素保持等高，只需调整flex容器的层级，让每个区块的内部元素自动填充高度。以下是修改后的代码：

修改后的CSS代码 #

.group {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}

.block {
  flex: 0 0 25%; /* 固定宽度占比，避免flex-grow导致宽度异常 */
  display: flex; /* 将.block设为flex容器 */
  flex-direction: column; /* 内部元素垂直排列 */
  padding: 0 5px; /* 可选：添加间距避免边框重叠 */
  box-sizing: border-box; /* 确保padding不影响宽度计算 */
}

.main {
  display: flex; /* 将.main设为flex容器 */
  flex-direction: column;
  flex-grow: 1; /* 填充.block的剩余高度 */
}

.text {
  flex-grow: 1; /* 填充.main的剩余高度 */
  border: 1px solid red;
  padding: 10px;
  box-sizing: border-box;
}

@media only screen and (max-width: 600px) {
  .block {
    flex: 0 0 50%; /* 小屏切换为2列布局 */
  }
}

关键修改说明 #

• 把.block和.main都设置为flex容器，通过垂直排列的flex布局让子元素自动拉伸高度
• 用flex-grow: 1让.main占满.block的可用高度，再让.text填充.main的全部高度
• 将.block的flex属性改为0 0 25%（小屏为0 0 50%），固定宽度占比，避免flex增长导致的布局偏移
• 添加box-sizing: border-box确保padding和边框不会额外增加元素宽度

原HTML代码（无需修改） #

<div class="group">
  <div class="block">
    <div class="main">
      <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
    </div>
  </div>
  <div class="block">
    <div class="main">
      <div class="text">Lorem ipsum.</div>
    </div>
  </div>
  <div class="block">
    <div class="main">
      <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
    </div>
  </div>       
  <div class="block">
    <div class="main">
      <div class="text">Lorem ipsum dolor sit amet.</div>
    </div>
  </div>   
</div>

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