移动端页面滚动异常问题求助

我最近碰到个头疼的问题：在移动端用CSS做滚动效果时，主内容区域没法正常滚动，底部的内容直接被底部导航栏挡住了。一开始我以为是设置了100vh高度的锅，结果把100vh去掉之后，问题还是没解决，实在搞不懂哪里出问题了😭

下面是我的Layout组件代码，大家帮忙看看是不是哪里写得不对：

import React, { ReactNode, useEffect } from "react";
import Header from "../LeftSide/Header";
import LeftSide from "../LeftSide/LeftSide";
import "./Layout.css";

interface Props {
  children?: ReactNode;
}
const Layout = ({ children, ...props }: Props) => {
const [collapsed, setCollapsed] = React.useState(false);
const handleValueChange = (value: any) => {
  setCollapsed(!collapsed);
};

useEffect(() => {
  window.scrollTo(0, 0);

  if (window.innerWidth <= 1000) {
    setCollapsed(true);
  }
}, []);

return (
  <>
    <div className={`layout-container ${collapsed ? 'collapsed' : ''}`}>
      <LeftSide collapsed={collapsed} onValueChange={handleValueChange} />
      <div className="main-content">
        <Header />
        {children}
      </div>
    </div>
  </>
);
};

export default Layout;

我自己瞎猜是不是布局的层级或者overflow属性没配置对？比如主内容区有没有加overflow-y: auto？或者底部导航用了固定定位的话，主内容区没给足够的padding-bottom？另外之前用100vh的时候，会不会是因为移动端的状态栏、导航栏占了空间，导致实际可滚动区域被压缩了？

有没有大佬能给我指点一下呀！

备注：内容来源于stack exchange，提问作者Tamzid