使用Flex Wrap时，如何通过min-height让首行高度与首元素一致？

我用Flex Wrap实现换行布局，当左侧首元素（First）高度增加时，右侧Flex Wrap首行的子元素（Second、Third）没法同步变长。现有代码如下：

原HTML结构 #

<div class="parent">
  <div class="unique-wrapper">
    <div class="unique_element">First</div>
  </div>
  <div class="child-wrapper">
    <div class="child">Second</div>
    <div class="child">Third</div>
    <div class="child">Fourth</div>
    <div class="child">Fifth</div>
  </div>
</div>

原CSS代码 #

div {
  font-family: arial, sans-serif; 
  margin: 5px;
  color: white;
  border: 1px dotted black;
}

.parent { 
  display: flex;
  width: 300px;
}

.unique_element {
  background-color: Crimson;
  padding: 10px 10px 10px 10px;
}

.unique-wrapper, .child-wrapper {
  border: none;
  margin: 0;
}

.unique-wrapper {
  flex: 3;
}

.child-wrapper {
  flex: 7;
  display: flex;
  flex-wrap: wrap;
}

.child {
  width: auto;
  background-color: Cornflowerblue;
  padding: 10px 10px 10px 10px;
}

我试过添加隐藏元素的方案，但用data.map渲染时没法给特定元素加类名，需要实现首元素高度变化时首行子元素同步等高的效果。

方案1：改用CSS Grid布局（推荐，无需修改HTML结构） #

Grid布局天生支持跨行等高对齐，直接调整父容器和右侧子容器的布局规则即可，nth-child选择器能自动匹配首行元素，完美适配data.map渲染场景：

div {
  font-family: arial, sans-serif; 
  margin: 5px;
  color: white;
  border: 1px dotted black;
}

.parent { 
  display: grid;
  grid-template-columns: 3fr 7fr; /* 保持原有的3:7宽度比例 */
  width: 300px;
}

.unique_element {
  background-color: Crimson;
  padding: 10px;
}

.unique-wrapper, .child-wrapper {
  border: none;
  margin: 0;
}

.child-wrapper {
  display: grid;
  /* 首行自动适配内容宽度，后续行自动填充剩余空间 */
  grid-template-columns: repeat(auto-fill, minmax(min-content, 1fr));
  grid-auto-flow: dense;
}

/* 让前两个子元素占据第一行，和左侧元素共享同一行高度 */
.child:nth-child(1), .child:nth-child(2) {
  grid-row: 1;
}

方案2：调整Flex结构（兼容旧场景） #

如果需要保留Flex布局，可通过给首行子元素增加外层容器，让这个容器和左侧元素等高，同时在data.map渲染时分组前两个元素：

修改后的CSS

div {
  font-family: arial, sans-serif; 
  margin: 5px;
  color: white;
  border: 1px dotted black;
}

.parent { 
  display: flex;
  width: 300px;
}

.unique-wrapper {
  flex: 3;
  display: flex;
}

.unique_element {
  background-color: Crimson;
  padding: 10px;
}

.unique-wrapper, .child-wrapper {
  border: none;
  margin: 0;
}

.child-wrapper {
  flex: 7;
  display: flex;
  flex-direction: column;
}

.first-row {
  display: flex;
  flex: 1; /* 强制和左侧元素等高 */
}

.child {
  width: auto;
  background-color: Cornflowerblue;
  padding: 10px;
  display: flex;
  align-items: center; /* 让内容垂直居中 */
}

渲染时的JSX处理（以React为例）

// 假设data是子元素数据数组
const childElements = data.map((item, idx) => (
  <div key={idx} className="child">{item}</div>
));

// 分组前两个元素和剩余元素
return (
  <div className="child-wrapper">
    <div className="first-row">{childElements.slice(0, 2)}</div>
    {childElements.slice(2)}
  </div>
);

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