CSS关于高度和滚动

Question

试图一般学习CSS和逆风，并在高度上挣扎。

https://jsfiddle.net/7f6cd1bx/

我在上面制作了一个 https://tailwindcomponents.com/component/new-telegram-web-web-web-clone

要滚动到聊天列表的底部，最后一张卡只会部分显示。我希望它完全显示。

根据我可以解释的内容，聊天列表设置为 100VH ，因此它溢出并配置为隐藏。我不确定如何使其适合给定的高度。

我真正感到困惑的是，垂直滚动条是为了处理不适合的内容，但是现在垂直的卷轴本身无法适合给定的空间。

感谢任何帮助。谢谢你！

Answer 1

显示：flex; 正确地被显示：block 适当地为此＆lt; div; div＆gt; 元素：

 <!-- left -->
        <div class="relative flex flex-col hidden h-full bg-white border-r border-gray-300 shadow-xl md:block transform transition-all duration-500 ease-in-out"
            style="width: 24rem">

尝试添加类左-side-wrap 到此＆lt; div＆gt;

 <!-- left -->
        <div class="left-side-wrap relative flex flex-col hidden h-full bg-white border-r border-gray-300 shadow-xl md:block transform transition-all duration-500 ease-in-out"
            style="width: 24rem">

之后添加此CSS代码以确保＆lt; div＆gt; 将具有 display：display： flex; 正确：

body .left-side-wrap{
  display: flex;  
}

在这里您可以检查更新的JS小提琴：
https://jsfiddle.net/j1rbv7un/