CSS/Tailwind高度设置问题：聊天列表滚动到底部末项显示不全

• 学习CSS与Tailwind技术栈过程中，参考新版Telegram网页克隆组件编写演示代码时，遇到高度配置相关问题
• 异常表现：聊天列表滚动至底部时，最后一个聊天卡片仅能部分显示，无法完整呈现
• 初步排查：聊天列表区域设置了100vh属性导致内容溢出，且容器配置了溢出隐藏规则，暂未找到让内容完全适配容器高度的调整方式
• 核心疑问：垂直滚动条的设计作用本就是承载超出容器范围的内容，但当前场景下垂直滚动条自身都无法在给定空间内完整适配

问题本质是高度计算逻辑错误：给聊天列表单独设置100vh时，没有扣除聊天列表上下方存在的顶部导航栏、搜索栏、底部操作栏等固定高度区块的尺寸，最终整个页面总实际高度为100vh + 各固定区块高度之和，已经超出了视口本身的高度。这种情况下聊天列表容器自身就有一部分被挤出了视口可视范围，即便容器内部配置了滚动规则，滚动到最底部也无法看到被挤出视口的那部分列表内容。

• 改用Flex弹性布局做全局高度自适应，抛弃给滚动容器单独硬编码100vh的写法：
  1. 页面最外层根容器添加h-screen flex flex-col类，让根容器严格等于视口高度，内部采用垂直弹性布局
  2. 顶部栏、底部栏这类固定高度的区块保持原有高度设置，不需要加弹性伸缩属性
  3. 聊天列表的滚动容器添加flex-1 overflow-y-auto类，不需要单独设置高度，让它自动占满根容器扣除所有固定高度区块后剩余的可用空间，从根源上避免总高度溢出
• 校正盒模型计算规则：给滚动容器添加box-border类，确保容器的内边距、边框值都算在容器自身高度内部，不会额外撑大容器导致溢出
• 梳理溢出规则：仅给实际需要滚动的聊天列表容器添加overflow-y-auto属性，移除父级容器上不必要的overflow-hidden设置，避免父级容器错误裁剪滚动区域
• 如果聊天列表区域底部有悬浮固定的操作按钮，给滚动容器添加对应高度的pb-[X]（X为悬浮元素高度）预留底部空间，避免最后一项被悬浮元素遮挡

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