如何实现高度自适应的聊天窗口垂直滚动？

我要创建一个聊天窗口，当内容溢出时触发垂直滚动。当前使用flex布局包含三个元素：标题栏、.chat聊天容器和输入框，.chat容器设置了flex:1属性。

当.chat容器内容溢出时，容器会被拉伸；若设置max-height:500px，内容可溢出滚动，但无法填充标题栏与输入框之间的空间。这是一个React项目。

核心是给.chat容器添加min-height: 0属性，打破Flex子元素默认的高度限制，让flex:1能正确分配标题栏和输入框之间的剩余空间，同时内容溢出时触发垂直滚动。

修改后的.chat样式如下：

.Clara .chat {
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: var(--clara-border-radius);
    position: relative;
    overflow-y: auto;
    width: 100%;
    flex: 1;
    min-height: 0; /* 关键新增属性 */
}

原理说明：Flex布局中，子元素默认min-height: auto，意味着它不会收缩到自身内容高度以下。添加min-height: 0后，子元素可以被压缩，flex:1就能让它占满父容器的剩余空间，同时overflow-y: auto会在内容超出容器高度时显示滚动条。

完整代码示例 #

HTML结构（保持不变） #

<div className='Clara-wrapper'>
     <div className='chat-side'>
        <div className='chat-info'>
          <p className='chat-title'>
            Currently chatting with: <span>Clara</span>
          </p>
        </div> { /* Chat info */ }

        <div className='chat'>
            <p className='assistant'>This is a Long message ................. </p>
            <p className='user'>This is a message</p>
            <p className='assistant'>This is a second message</p>
            <p className='assistant'>This is a Long message ................. </p>
            <p className='user'>This is a message</p>
            <p className='assistant'>This is a Long message ................. </p>
            <p className='assistant'>This is a second message</p>
            <p className='user'>This is a message</p>
            <p className='assistant'>This is a second message</p>
        </div> { /* Chat respones */ }

        <div className='chat-input'>
          <div className='input-container'>
            <input id='ai-input' placeholder='Message Clara...'/>
            <div className='send' title='Send message'></div>
          </div>
        </div> { /* Chat input */ }

      </div> { /* Chat side */ }

      <div className='face-side'>
       { /* Other side content */ }
      </div> { /* Face side */ }

    </div> { /* Clara Wrapper */ }

修改后的CSS #

.Clara-wrapper {
    position: relative;
    margin: 53px 40px 27px 40px;
    height: calc(100% - 80px);

    display: grid;
    grid-template-columns: 52% auto;
    grid-template-rows: 1;
    gap: 15px;
}

.Clara .chat-side {
    display: flex;
    flex-direction: column;
    height: 100%;
}


/* chat */
.Clara .chat {
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: var(--clara-border-radius);
    position: relative;
    overflow-y: auto;
    width: 100%;
    flex: 1; 
    min-height: 0; /* 新增关键属性 */
}

.Clara .chat::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 300px;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(29, 33, 32, 0.8), rgba(29, 33, 32, 0));
}

.Clara .chat > p {
    width: fit-content;
    max-width: 75%;
    border-radius: var(--clara-border-radius);
    background-color: var(--clara-dark-1);
    padding: var(--clara-padding-chat);
    box-shadow: var(--clara-button-shadow);
}

.Clara .chat .assistant {
    background-color: var(--clara-main);
    margin-left: auto;
}

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