Scroll bar does not track down when a long paragraph is input. The scrollbar should go all the way down and stay down as the user sends messages.

This is the parent div and the chat feed div:

     <div className="flex flex-col justify-between h-full" data-cy="chatThread">
          <div className="sticky top-0 bg-primaryBg">
            <SidePanelHeader onDismiss={handleChatToggle} alignChildren="left">
              <button className="flex items-center pl-2" onClick={showActiveChats}>
                <span className="mr-1">
                  <Icon svg={LeftArrow} size={10} color="accentText" />
                </span>
                Back to All chats
              </button>
            </SidePanelHeader>
            <ChatGroups
              chatId={chatId}
              isMyParty={isMyParty}
              isTeamMeeting={meeting?.type?.key === 'team-meeting'}
              chatGroupParties={chatGroupParties}
              dmParticipant={dmParticipant ? dmParticipant[0] : undefined}
            />
          </div>
     </div>

      {/* Chat Feed*/}
          <div
            className={classNames('flex flex-auto flex-col overflow-y-auto p-3', {
              'bg-red-100': !isMyParty && meeting?.type?.key !== 'team-meeting',
            })}
            data-cy="chatThread-feed"
          >
            {mergedMessagesAndParticipantsInThread().map((chatBubble, index) => (
              <ChatBubble
                participants={allParticipantsFlat}
                prevBubble={getMessages()[index - 1]}
                bubble={chatBubble}
                index={index}
                key={chatBubble.ts}
                ref={scrollToRef}
              />
            ))}
          </div>

Here is a screenshot of the scroll bar not tracking down when a large block of text is entered.