如何阻止子Div超出父Div高度？React+Tailwind布局问题

问题描述 #

我用React写了一个页面组件，代码如下：

<div className='block justify-center flex flex-col h-screen py-8 px-48'>
    <div className='flex'>
        <Form />
    </div>
    <div className='flex-1'>
        <div className='shadow-md flex flex-col'>
            <div className='flex'>
                <div className='flex w-full py-2 px-2 bg-white border-0'>
                    <div className='flex-1'>
                        <Searchbar />
                    </div>
                    <div className='flex'>
                        <Button />
                    </div>
                </div>
            </div>
            <div className='overflow-auto flex-1'>
                <Table />
            </div>
        </div>
    </div>
</div>

当前遇到的问题：Table元素超出了父block的高度，overflow-auto未触发滚动，无法将表格限制在block边界内。尝试过用flex和flex-1让元素占据父容器剩余空间，但当前配置未生效，且不想使用依赖子元素固定尺寸的方案。

解决方案 #

问题核心在于包裹搜索栏和表格的shadow-md容器没有被设置为占满父容器高度，导致内部overflow-auto容器无法获得有效高度约束，调整步骤如下：

1. 给shadow-md所在的div添加flex-1类，让它完全占据父级flex-1容器的高度，这样内部的flex-col布局才能正确分配空间——搜索栏区域自适应高度，表格容器用flex-1占据剩余空间。
2. 确保Table组件内部没有设置独立的高度或overflow属性，让父级overflow-auto容器控制滚动行为。

修改后的代码 #

<div className='block justify-center flex flex-col h-screen py-8 px-48'>
    <div className='flex'>
        <Form />
    </div>
    <div className='flex-1'>
        {/* 添加flex-1让容器占满父级剩余高度 */}
        <div className='shadow-md flex flex-col flex-1'>
            <div className='flex'>
                <div className='flex w-full py-2 px-2 bg-white border-0'>
                    <div className='flex-1'>
                        <Searchbar />
                    </div>
                    <div className='flex'>
                        <Button />
                    </div>
                </div>
            </div>
            <div className='overflow-auto flex-1'>
                <Table />
            </div>
        </div>
    </div>
</div>

布局说明 #

• 最外层flex flex-col h-screen确保页面高度占满屏幕，py-8 px-48设置内外边距；
• 第一个子容器（Form所在）高度自适应，第二个子容器的flex-1占据剩余屏幕空间；
• shadow-md容器添加flex-1后，会完全填充父级剩余空间，内部flex-col布局自动分配空间：搜索栏区域高度由自身内容决定，表格容器占据剩余空间；
• 表格容器的overflow-auto会在内容超出剩余空间时自动显示滚动条，实现预期的表格溢出效果。

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