React聊天窗口：向上扩展、滚动及底部输入框固定的CSS实现

针对你提出的两个布局需求，可通过Flexbox布局实现，具体CSS代码及说明如下：

核心CSS代码 #

/* 聊天容器外层 */
.chat-window-wrapper {
  display: flex;
  flex-direction: column;
  max-height: /* 你已计算好的最大高度值 */;
  /* 若outer-wrapper存在特殊布局，可添加position: relative; 确保内部元素定位正常 */
}

/* 消息列表区域 */
.chat-window {
  flex: 1; /* 自动填充容器内除输入框外的剩余垂直空间 */
  overflow-y: auto; /* 消息超过容器高度时显示垂直滚动条 */
}

/* 输入框区域 */
.chat-window-textarea {
  flex-shrink: 0; /* 禁止输入框被压缩，保持固定高度 */
  /* 可根据需求添加padding、height等自定义样式 */
}

方案说明 #

1. 输入框固定在底部
   通过给.chat-window-wrapper设置垂直方向的Flex布局，让内部的.chat-window和.chat-window-textarea垂直排列。flex: 1会让消息区域自动占据所有剩余空间，而flex-shrink: 0确保输入框不会被压缩，始终固定在容器底部，不会出现在消息中间。

2. 容器仅向上扩展，达到最大高度后滚动
   你已经设置的max-height会限制.chat-window-wrapper的最大高度，当消息增多导致.chat-window内容超过可用空间时，overflow-y: auto会触发滚动条，此时容器高度不会继续向下扩展，也就不会挤压下方的element-below。

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