如何用Tailwind CSS实现Section独立滚动，避免高度合并？

我用Tailwind CSS写了一段网格布局代码，单个Section显示正常，但添加第二个相同的Section后，两个Section的高度出现合并问题，请问如何让这两个Section高度独立，且支持用户滚动查看？

原代码 #

<div className='w-[50%] h-full flex items-center justify-center flex-col'>
        <div className='container grid grid-cols-2 grid-rows-4 p-10 gap-5 w-full h-full'>
            <div className='row-span-1 border-2 border-black'>1</div>
            <div className='row-span-2 border-2 border-black'>2</div>
            <div className='row-span-2 border-2 border-black'>3</div>
            <div className='row-span-2 border-2 border-black'>4</div>
            <div className='row-span-1 border-2 border-black'>5</div>
        </div>
</div>

效果展示 #

单个Section显示效果：

添加第二个Section后的效果：

解决方案 #

问题根源在于外层容器使用h-full会让两个Section平分父容器高度，且未设置滚动触发条件。修改方案如下：

修改后的代码 #

<!-- 第一个Section -->
<div className='w-[50%] max-h-[90vh] overflow-y-auto flex items-center justify-center flex-col'>
    <div className='container grid grid-cols-2 grid-rows-4 p-10 gap-5 w-full'>
        <div className='row-span-1 border-2 border-black'>1</div>
        <div className='row-span-2 border-2 border-black'>2</div>
        <div className='row-span-2 border-2 border-black'>3</div>
        <div className='row-span-2 border-2 border-black'>4</div>
        <div className='row-span-1 border-2 border-black'>5</div>
    </div>
</div>

<!-- 第二个Section -->
<div className='w-[50%] max-h-[90vh] overflow-y-auto flex items-center justify-center flex-col mt-5'>
    <div className='container grid grid-cols-2 grid-rows-4 p-10 gap-5 w-full'>
        <div className='row-span-1 border-2 border-black'>1</div>
        <div className='row-span-2 border-2 border-black'>2</div>
        <div className='row-span-2 border-2 border-black'>3</div>
        <div className='row-span-2 border-2 border-black'>4</div>
        <div className='row-span-1 border-2 border-black'>5</div>
    </div>
</div>

修改说明 #

• 移除外层容器的h-full，替换为max-h-[90vh]（可根据需求调整高度数值），限制每个Section的最大显示高度
• 添加overflow-y-auto，当Section内容超过最大高度时自动显示垂直滚动条
• 内层网格容器去掉h-full，让它自适应内容高度，保证网格行高的正常布局
• 第二个Section添加mt-5（可选），增加两个Section之间的间距，优化视觉体验

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