Tailwind+React左右分栏独立滚动问题求助

我要做一个带导航栏的左右分栏页面，要求禁止页面整体滚动，左右两栏各自独立滚动。目前左侧列表滚动正常，但右侧的RightComponent内容增多时会超出页面范围，需要让它在右侧栏内居中，同时内部内容可滚动。

修改方案及代码调整 #

1. 调整App.tsx：确保页面布局高度正确

给根容器设置垂直flex布局，让导航栏占自身高度，主页内容占满剩余视口高度，避免整体滚动。

function App() {
    return (
        <div className='App flex flex-col min-h-screen'>
            <Navbar/>
            <HomePage className="flex-1"/>
        </div>
    );
}

2. 修改Home.tsx：优化右侧容器布局

给右侧容器添加flex布局实现内容居中，同时设置高度约束和溢出隐藏，防止内容超出视口。

function HomePage() {
    return (
        <div className='flex bg-primary-grey h-full'>
            <div className='w-1/2 h-full p-5 overflow-y-auto scrollbar-thin scrollbar-thumb-primary-blue'>
                <ul>
                    {
                        items.map((item) => {
                            return (
                                <Item item={item}/>
                            )
                        })
                    }
                </ul>
            </div>
            {/* 右侧容器：flex布局居中，限制高度并隐藏溢出 */}
            <div className='w-1/2 h-full p-5 overflow-hidden flex flex-col items-center'>
                <RightComponent/>
            </div>
        </div>
    );
}

3. 调整RightComponent.tsx：实现内部滚动

让组件占满右侧容器的可用空间，同时开启垂直滚动，确保内容超出时可滚动。

function RightComponent() {
    return (
        <div className='bg-white rounded-md p-5 shadow w-full flex-1 overflow-y-auto'>
            <div className='rounded-md shadow text-center p-5 mt-10'>
                <p className='text-lg font-bold text-left mb-3'>Items</p>
                <ul className='flex mt-1'>
                    {
                        exampleItems.map((name) => {
                            return (
                                <ExampleItem name={name}/>
                            )
                        })
                    }
                </ul>
            </div>
            <div className='rounded-md shadow text-center p-5 mt-10'>
                <p className='text-lg font-bold text-left mb-3'>Description</p>
                <p className='text-left'>
                   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ultricies odio ex, at malesuada velit viverra vel. Aenean efficitur facilisis ipsum sit amet luctus. Aliquam egestas nunc diam, a efficitur eros sodales sit amet. Morbi volutpat vitae purus semper dapibus. Suspendisse tempus commodo risus. Duis eu lacus ipsum. Maecenas interdum quam in orci posuere dictum. Donec posuere nisi at vulputate fringilla.

Mauris laoreet suscipit ipsum non commodo. Nullam maximus nibh sapien, et cursus purus dapibus nec. Praesent consectetur tincidunt pulvinar. Duis pellentesque neque et sem aliquam, id sagittis ex pellentesque. Nulla suscipit tincidunt suscipit. Quisque leo nibh, lacinia sed purus et, finibus iaculis nulla. Phasellus eu maximus quam, et egestas lacus.
                </p>
            </div>
        </div>
    );
}

关键修改说明 #

• App.tsx：通过flex flex-col min-h-screen让主页内容自动填充导航栏下方的剩余空间，避免页面整体滚动。
• Home.tsx：右侧容器用flex flex-col items-center实现内容居中，h-full overflow-hidden确保容器高度不超出视口，阻止内容溢出到页面外。
• RightComponent.tsx：flex-1让组件占满右侧容器的可用高度，overflow-y-auto在内容超出时自动显示垂直滚动条，保留原有样式的同时实现独立滚动。

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