React.ts+Tailwind聊天应用overflow-y-scroll失效问题求助

开发聊天应用时，给承载Message组件的容器添加overflow-y-scroll类后，滚动条仅显示未激活状态，消息内容被截断。已尝试调整父元素高度、flex属性及设置父元素overflow，但问题未解决。

相关组件代码如下：

CurrentChat.tsx（当前活跃聊天展示组件） #

import React, { Dispatch, SetStateAction } from 'react';
import { chats } from '@/db/db';
import Message from './Message';
import UserBar from './UserBar';
import SendMessage from './SendMessage';

type propsType = {
  currChat: string | null;
  setCurrChat: Dispatch<SetStateAction<string | null>>;
}


export default function CurrentChat({ currChat, setCurrChat }: propsType) {
  const chat = chats.filter(chat => chat.user.name === currChat)[0];
  return (
    <div>
      <div className='bg-[#E7E8D1] flex min-h-full min-w-[65vw] align-bottom'>


        {currChat === null
        ?
        <div className='flex justify-center items-center min-h-[100vh] w-full select-none'>
          <p>
            Select a chat to start a conversation
          </p>
        </div>
        :
        <div className='flex flex-col justify-end w-full h-[100vh]'>

          <div className='flex flex-col justify-self-start flex-auto'>
            <UserBar />
          </div>

          <div className="h-[90%] overflow-y-scroll">
            <div className='flex flex-col justify-end h-[100%] w-full'>
              <Message message={chat.messages[0]} />
              <Message message={chat.messages[1]} />
              <Message message={chat.messages[2]} />
              <Message message={chat.messages[0]} />
              <Message message={chat.messages[1]} />
              <Message message={chat.messages[2]} />
              <Message message={chat.messages[0]} />
              <Message message={chat.messages[1]} />
              <Message message={chat.messages[2]} />
              <Message message={chat.messages[0]} />
              <Message message={chat.messages[1]} />
              <Message message={chat.messages[2]} />
              <Message message={chat.messages[0]} />
              

            </div>
          </div>

          <SendMessage />

        </div>
        }
          


      </div>
    </div>
  )
}

Message.tsx #

import React from 'react';
import { localUser } from '@/db/db';

type propsType = {
    message: Message
}

export default function Message(props: { message: Message}) {
  const { message } = props;

  const time = message.date.split(' ')[1];

  const align = message.sender !== localUser
  ? 'self-start bg-[#f9fae1]' : 'self-end bg-[#e9e9dd]';

  return (
    <div className={'flex flex-col shadow-sm mx-6 px-6 pt-6 pb-2 w-[fit-content] max-w-[30vw] rounded-3xl m-5 ' + align}>
        {message.content}
        <div className="flex flex-row justify-end mt-1">
            {time}
        </div>
    </div>
  )
}

UserBar.tsx（当前聊天对象展示组件） #

import React from 'react'

export default function UserBar() {
  return (
    <div className='z-2 w-full h-[10vh] flex bg-[#fff0] shadow-md flex-row'>
        <div className="rounded-full bg-white w-[5rem] h-[5rem] self-center ml-3"></div>
        <div className='ml-5 self-center'>Name</div>
    </div>
  )
}

SendMessage.tsx #

import React from 'react'

export default function SendMessage() {
  return (
    <div className='w-full h-[8vh] flex bg-[#8f8f8f] flex-row justify-self-end'>
        SendMessage
    </div>
  )
}

效果说明：滚动条未激活，消息内容被截断。

问题出在flex布局的高度计算和容器嵌套逻辑上，调整以下几点即可修复：

1. 修正外层容器的布局逻辑
   将承载聊天内容的外层容器（flex flex-col justify-end w-full h-[100vh]）去掉justify-end，改为仅保留flex flex-col w-full h-[100vh]。原justify-end会导致内部元素整体靠下，挤压消息容器的可显示空间。

2. 调整消息容器的空间分配
   将消息容器的h-[90%]改为flex-1，让它自动填充UserBar和SendMessage之外的剩余空间，同时保留overflow-y-scroll。这样容器会获得明确的可滚动区域，内容超出时滚动条正常激活。

3. 移除不必要的flex属性
   删除UserBar外层的flex-auto，因为UserBar本身是固定高度（10vh），不需要自动分配空间，避免干扰flex布局的空间计算。

修改后的CurrentChat核心代码片段：

<div className='flex flex-col w-full h-[100vh]'>
  <div className='flex flex-col justify-self-start'>
    <UserBar />
  </div>
  <div className="flex-1 overflow-y-scroll">
    <div className='flex flex-col justify-end h-[100%] w-full'>
      {/* 所有Message组件 */}
    </div>
  </div>
  <SendMessage />
</div>

以上调整后，消息容器会正确占据剩余空间，内容超出时滚动条正常工作，消息也会保持底部对齐的显示效果。

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