如何启用灵活高度的垂直滚动？

Question

我想创建一个聊天窗口，如果内容溢出，它会垂直滚动。 我有一个包含 3 个项目的 Flexbox。标题、.chat 聊天框和输入。 .chat 聊天框有 Flex: 1; 我相信它必须有 Flex: 1 导致不同的屏幕尺寸。 （尽管这是一个学校项目，但它将在单个设备上显示。因此不需要真正的响应能力。）

当我溢出 .chat 容器时，它就会拉伸。 如果我设置 max-height: 500px;它欠流到 .chat 容器，但我需要它来填充两个弹性项目之间的空间。

我不确定，我应该在 HTML 中走多远......这是一个相当大的 React 项目。 我只会发布有问题的部分，如果需要的话可以链接到整个代码。

整个应用程序的屏幕截图：https://imgur.com/a/5zKc9qJ

    <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 */ }

.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; 
}

.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;
}

Answer 1

好吧，我会说尝试将父 Flex 容器设置为

flex-direction: column

。然后，将

flex: 1

设置为聊天容器以占据可用的垂直空间。

过去垂直滚动对我有用的是设置

overflow-y: auto

，所以尝试在聊天容器上使用它。

真的希望有帮助:)