如何阻止Flex元素中textarea及镜像内容随内容动态扩展

问题核心是垂直Flex容器默认会随内容拉伸尺寸，导致overflow: scroll无法生效——滚动属性需要元素有确定的高度限制才能触发。只需调整Flex容器和子元素的属性，就能让卡片保持初始高度，同时镜像内容区域可滚动：

具体CSS修改步骤 #

1. 给卡片容器（.card）设置高度限制，让它初始由内部textarea的高度决定，且不随内容拉伸：

.card {
  /* 原有样式保留 */
  height: fit-content;
  overflow: hidden;
}

2. 让垂直排列的Widget容器占满卡片的高度：

.widget.vertical {
  /* 原有样式保留 */
  height: 100%;
}

3. 固定textarea的高度（防止被压缩），并让镜像区域（#copy）占据剩余空间，同时启用滚动：

textarea {
  /* 原有样式保留 */
  flex-shrink: 0;
}

#copy {
  /* 原有样式保留 */
  flex: 1;
  overflow: auto;
}

修改后的完整代码 #

JavaScript

let text = document.getElementById("text");
let copy = document.getElementById("copy");
text.addEventListener("input", function(event){
  copy.textContent = event.target.value;
});

CSS

.card-holder {
  display: flex;
  justify-content: center;
  align-items: stretch;
  margin: 10px;
  gap: 10px;
}
.card {
  background-color: #EEE;
  border: solid 1px #DDD;
  border-radius: 4px;
  padding: 10px;
  flex-grow: 2;
  height: fit-content;
  overflow: hidden;
}
.widget {
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
  gap: 10px;
}
.widget.vertical {
  flex-direction: column;
  height: 100%;
}

textarea {
  resize: none;
  padding: 10px;
  flex-shrink: 0;
}

#copy {
  padding: 10px;
  background: #EEE;
  border: solid 1px #DDD;
  border-radius: 4px;
  flex: 1;
  overflow: auto;
}

HTML

<div class="section">
  <div class="card-holder">
    <div class="card">
      <div class="widget vertical">
        <textarea id="text" rows="10" columns="5" placeholder="Insert a large amount of text here"></textarea>
        <div id="copy">
          I'll grow too
        </div>
      </div>
    </div>

    <div class="glass card">
      More stuff here too
    </div>
  </div>
</div>

原理说明 #

• height: fit-content 让卡片初始高度由内部textarea的尺寸决定，不会随镜像内容的增加而拉伸；
• overflow: hidden 确保卡片内部超出的内容不会撑破容器；
• flex-shrink: 0 固定textarea的高度，避免被镜像区域挤压；
• flex: 1 让镜像区域占据卡片内的剩余空间，配合overflow: auto实现内容滚动。

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