如何实现Flex项目仅在内容填满后才触发高度拉伸？

要实现「第二个flex项目文本填满后才让其他项目高度变化」的效果，核心是让第二个项目优先以内容高度展示，只有当内容超出容器剩余空间的分配阈值后，才允许挤压第一个项目的高度。以下是具体实现方案：

修改后的代码 #

JavaScript #

function addDummyText() {
  const span = document.getElementById("second-row-span");
  span.textContent = span.textContent + " Lorem ipsum dolor sit amet ";
}

// 动态计算第三个项目高度，用于适配第二个项目的最大高度限制
const thirdItem = document.getElementById('third-item');
function setThirdItemHeight() {
  document.documentElement.style.setProperty('--third-item-height', `${thirdItem.offsetHeight}px`);
}
setThirdItemHeight();
window.addEventListener('resize', setThirdItemHeight);

CSS #

html,
body {
  height: 100%;
  margin: 0;
}

.flex-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.flex-item:nth-child(1) {
  /* 初始占满容器剩余空间，允许被压缩，min-height:0 确保内容溢出时能正常收缩 */
  flex: 1 1 0;
  min-height: 0;
  background-color: red;
}

.flex-item:nth-child(2) {
  /* 优先以内容高度展示，仅当内容超出限制时才挤压第一个项目 */
  flex: 0 1 auto;
  /* 动态设置最大高度为容器剩余空间的2/3，对应原1:2的比例分配 */
  max-height: calc((100vh - var(--third-item-height)) * 2/3);
  background-color: blue;
}

.flex-item:nth-child(3) {
  flex: 0 1 auto;
  background-color: grey;
}

HTML #

<div class="flex-container">
  <div class="flex-item"><span contenteditable=""></span><span class="counter">1 <input type="button" onclick="addDummyText()" value="add text" /> </span></div>
  <div class="flex-item"><span contenteditable=""></span><span id="second-row-span" class="counter">2</span></div>
  <div class="flex-item" id="third-item"><span contenteditable=""></span><span class="counter">3</span></div>
</div>

逻辑说明 #

1. 第一个项目：通过flex:1 1 0让它初始占满容器剩余空间（减去第三个项目高度），min-height:0解决flex容器中项目内容溢出时无法收缩的问题。
2. 第二个项目：flex:0 1 auto让它优先匹配自身内容高度，同时通过CSS变量动态计算最大高度（对应原1:2的比例分配），当内容超出这个高度时，自动突破限制并挤压第一个项目的高度。
3. 第三个项目：保持原flex:0 1 auto，高度完全由自身内容决定。

如果不需要严格遵循原比例，可简化方案：去掉max-height设置，让第二个项目完全以内容高度优先，只有当内容超出容器剩余空间时才开始挤压第一个项目。修改第二个项目的CSS为：

.flex-item:nth-child(2) {
  flex: 1 0 auto;
  background-color: blue;
}

此时初始状态下第二个项目仅占内容高度，第一个项目占满剩余空间；当第二个项目内容增加到超出剩余空间时，开始挤压第一个项目的高度。

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