Flex布局下模态框内容垂直截断问题求助（Tailwind CSS）

问题根源 #

外层容器同时使用 flex + items-center 实现垂直居中时，若子元素高度超过容器，会直接从容器上下边缘溢出，无法触发 overflow-y: auto。这是因为Flex的居中布局逻辑会优先保证子元素的居中状态，忽略容器的溢出限制。

修复方案 #

步骤1：调整外层容器的垂直居中方式 #

移除外层的 items-center，改用Flex的自动margin特性实现居中，同时保留 overflow-y: auto 确保内容溢出时生成滚动条。

步骤2：限制内层容器的最大高度 #

给内层模态框容器设置最大高度，避免内容撑满整个视口，同时配合外层滚动逻辑。

修改后的完整代码 #

<div class="fixed inset-0 z-[99999] h-full w-full flex box-border overflow-y-auto min-h-[250px]">
    <div class="w-[800px] min-w-[250px] max-w-full flex flex-col items-center justify-center mx-auto my-auto max-h-[calc(100vh-2rem)]">
        CONTENT HERE
    </div>
</div>

额外说明 #

• 用Tailwind内置的 inset-0 替代 left-0 top-0，写法更简洁规范。
• 内层容器的 max-h-[calc(100vh-2rem)] 可根据需求调整上下边距（比如把 2rem 改成其他值），避免内容紧贴视口边缘。
• 若内层内容本身高度过大，可给内层容器额外添加 overflow-y-auto，让模态框内部独立滚动，优化体验。

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