중간 열에 높이 문제가 있는 3열 레이아웃이 있습니다. 일반적으로 말하자면 채팅 애플리케이션입니다. 수업 이름은 다음과 같습니다. 이 세 개의 열을 포함하는 컨테이너의 경우(열의 높이를 동일하게 만들기 위해 이와 같은 그리드를 사용하기로 결정했습니다):

으아아아

왼쪽 열과 오른쪽 열은 덜 중요하지만 왼쪽 열에는 사용자 목록이 표시된다는 점에 유의해야 합니다. 목록의 길이는 다를 수 있습니다(사용자는 필터링될 수 있음). 오른쪽 열에는 (크기 측면에서) 정적 콘텐츠가 있습니다.

가운데 열:

으아아아

이 중간 열에는 3개의 div가 있는데, 그 중 두 번째는 골치 아픈 일입니다

상단 div(높이는 고정됨);

으아아아

하단 div (높이도 고정됨)

으아아아

처음 렌더링될 때 일반적으로 왼쪽 열의 콘텐츠가 가장 높고 아래쪽 div가 해당 콘텐츠와 시각적으로 정렬됩니다. 사용자를 필터링할 때 가운데 열의 하단 div가 오른쪽 열의 하단 섹션과 시각적으로 정렬됩니다. 이것은 완전히 정상입니다. 문제는 중간 열의 가운데 div에 채팅 메시지가 나타날 때 발생합니다. 이러한 메시지가 적으면 문제가 되지 않지만 곧 중간 div가 매우 커지고 튀어나옵니다. 따라서 가운데 ​​열은 더 커지고 아래쪽 div는 낮아져 레이아웃이 손상됩니다. 중간 열의 중간 div가 특정 높이에 도달하고 해당 높이를 초과하지 않을 때 자체 스크롤 막대를 갖기를 원하지만 이는 매우 복잡해 보입니다.

이제 중간 div의 스타일은 다음과 같습니다.

으아아아

하지만 작동하지 않습니다. 새 메시지가 있으면 콘텐츠 높이가 늘어납니다(스크롤 막대가 활성화되어 있고 일부 콘텐츠가 스크롤 막대 "뒤에" 있더라도). 나는 이것이 고정된 픽셀 높이가 없는 열의 컨테이너와 관련이 있다고 생각합니다. 하지만 그럴 수는 없습니다. 또한 중간 열 스타일을 flex 또는 Grid로 설정해 보았지만 모두 동일하게 작동합니다. JS로 해결될 수도 있겠지만, 저는 엄격한 CSS 솔루션을 선호합니다. 어떤 아이디어가 있나요?