在垂直 Flex 布局中，当顶部内容区（如聊天消息列表）内容较多时，需确保其能随底部固定高度输入框的变化动态收缩并支持滚动，关键在于为顶部容器设置 overflow: auto 并合理配置 Flex 行为。

在垂直 flex 布局中，当顶部内容区（如聊天消息列表）内容较多时，需确保其能随底部固定高度输入框的变化动态收缩并支持滚动，关键在于为顶部容器设置 `overflow: auto` 并合理配置 flex 行为。

要实现聊天界面中「消息区自适应剩余高度 + 输入框固定高度」的理想布局，仅靠 height: 100% 是不够的——它无法约束内容溢出行为，导致 Flex 容器忽略高度限制、拒绝压缩已撑开的子元素。

正确解法是：将 .view 设为 Flex 主轴上的弹性项，并启用滚动机制。具体步骤如下：

1. 移除 .view 的 height: 100%（该声明与 Flex 弹性冲突，易引发计算异常）；
2. 在 .box（即直接父容器）上启用 flex: 1 或 flex-grow: 1，使其占据全部可用空间；
3. 为 .view 添加 flex: 1 和 overflow: auto，使其成为可伸缩且可滚动的区域；
4. 保持 .input 使用明确高度（如 height: 400px）或 flex-shrink: 0 防止被压缩。

优化后的 CSS 示例：

.wrapper {
  padding: 20px 40px 40px;
  height: 100vh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column; /* 推荐使用更明确的写法 */
}

.box {
  display: flex;
  flex-direction: column;
  flex: 1; /* 占满 wrapper 剩余高度 */
  border: 1px solid red;
}

.view {
  flex: 1;           /* 弹性占据所有可用空间 */
  overflow: auto;    /* 内容超限时出现滚动条，不撑破容器 */
  border: 1px solid blue;
  color: white;
  padding: 10px;
}

.input {
  height: 400px;     /* 固定高度，也可改用 flex: 0 0 400px */
  border: 1px solid green;
  margin-top: 8px;
}

⚠️ 注意事项：

• 避免同时使用 height: 100% 与 flex: 1，二者语义冲突，易导致浏览器渲染不一致；
• overflow: auto 是核心——它既允许内容滚动，又向 Flex 布局“声明”该元素有明确边界，从而触发正确的尺寸收缩逻辑；
• 若需输入框也具备弹性（如响应式高度），可用 flex: 0 0 auto + min-height/max-height 组合替代固定 height。

最终效果：无论 .input 高度设为 100px 还是 400px，.view 均能精准填充剩余空间，并在内容超出时提供平滑滚动体验，完全满足聊天界面的动态布局需求。