如何让Flex容器换行后单个Flex项占满剩余父容器高度？

问题背景 #

我有一个hero区域分为两部分，一部分以装饰为主，另一部分包含更多文本与元素。希望屏幕宽度足够时呈现两列布局，屏幕变窄时自动换行，目前已实现该布局。但换行后两项均占用父容器50%高度，我想让其中一项（item1）收缩至自身元素高度，另一项（item2）占满父容器剩余高度。之前尝试给flex容器添加align-content: flex-start并给目标项设置height: 100%，但会导致换行后溢出。

原示例代码 #

.hero {
display: flex;
flex-wrap: wrap;
height: 500px;
}
.hero .item {
  flex-basis: 40%;
  min-width: 300px;
}

/*PURELY DECORATIVE*/
.hero {
  background-color: hsla(0, 100%, 50%, 0.5);
  padding: 10px;
  border: 2px dotted red;
}
.item1 {
  background-color: hsla(120, 100%, 50%, 0.5);
  padding: 10px;
  border: 2px dotted green;
}
.item2 {
  background-color: hsla(240, 100%, 50%, 0.5);
  padding: 10px;
  border: 2px dotted blue;
}

<section class="hero">
    <div class="item item1">Item1. Should be short when wrapped</div>
    <div class="item item2">Item2. Should take all available height when wrapped.</div>
</section>

最优方案：使用Grid布局 #

Grid布局能更直观地实现需求，无需额外处理溢出问题，代码更简洁：

.hero {
  display: grid;
  /* 响应式列：最小宽度300px，自动适配列数 */
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  height: 500px;
  gap: 10px; /* 用gap替代容器padding，避免边框重叠 */
  padding: 10px;
  background-color: hsla(0, 100%, 50%, 0.5);
  border: 2px dotted red;
}
.hero .item {
  padding: 10px;
}
.item1 {
  background-color: hsla(120, 100%, 50%, 0.5);
  border: 2px dotted green;
  /* 单列模式下高度自适应内容 */
}
.item2 {
  background-color: hsla(240, 100%, 50%, 0.5);
  border: 2px dotted blue;
  /* 单列时占满剩余高度；双列时自动匹配容器高度 */
  align-self: stretch;
}

方案说明

1. 响应式列切换：repeat(auto-fit, minmax(300px, 1fr))会根据屏幕宽度自动调整列数，宽度足够时显示两列，不足时自动切换为单列。
2. 高度自适应逻辑：单列模式下，item1高度由内容决定，item2通过align-self: stretch自动填充容器剩余高度；双列模式下，两个子项高度均匹配容器的500px固定高度。
3. 无溢出风险：Grid的原生布局逻辑不会触发溢出，gap属性也避免了子项边框与容器边框的重叠问题。

Flex布局替代方案（无媒体查询） #

如果坚持使用Flex布局，可通过调整对齐属性+少量JS辅助实现：

.hero {
  display: flex;
  flex-wrap: wrap;
  height: 500px;
  align-content: flex-start; /* 换行后行高由内容决定 */
  padding: 10px;
  background-color: hsla(0, 100%, 50%, 0.5);
  border: 2px dotted red;
  --item-height: auto;
}
.hero .item {
  flex-basis: 40%;
  min-width: 300px;
  padding: 10px;
}
.item1 {
  background-color: hsla(120, 100%, 50%, 0.5);
  border: 2px dotted green;
  flex-shrink: 0; /* 防止内容被压缩 */
  margin-bottom: 10px; /* 模拟gap效果 */
}
.item2 {
  background-color: hsla(240, 100%, 50%, 0.5);
  border: 2px dotted blue;
  flex-grow: 1;
  /* 动态计算剩余高度 */
  height: calc(100% - var(--item-height));
}

// 动态计算item1高度，解决calc无法使用auto的问题
const item1 = document.querySelector('.item1');
const hero = document.querySelector('.hero');

function updateItemHeight() {
  const isWrapped = window.innerWidth < 640; // 匹配min-width:300px的换行阈值
  if (isWrapped) {
    const itemHeight = item1.offsetHeight + 10; // 加上margin-bottom
    hero.style.setProperty('--item-height', `${itemHeight}px`);
  } else {
    hero.style.setProperty('--item-height', 'auto');
  }
}

window.addEventListener('resize', updateItemHeight);
updateItemHeight();

注意：该Flex方案需要JS辅助计算高度，不如Grid方案简洁，推荐优先使用Grid布局。

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