尝试移动到页脚底部，但页脚粘在顶部
尝试添加对齐内容：间距/对齐self:flex end
它不起作用了
我所期望的

我得到了什么

试图检查铬元素，底部覆盖着紫色指示器
这是密码
sidebar.js

const Sidebar = (props) => {
    return (
            <ProSidebar className='ProSidebar' >
                    <SidebarHeader className='Header'>
                        <img src={logo}></img>    
                    </SidebarHeader>
                    <div className='Line'/>
                    <SidebarContent className='Menu'>
                        <text>Content1</text>
                        <text>Content2</text>
                    </SidebarContent>
                    <div className='Line'/>
                    <SidebarFooter className='Footer'>
                        <text>Footer</text>
                    </SidebarFooter>
            </ProSidebar>
    )
}

export default Sidebar

sidebar.css

.ProSidebar {
  display: flex;
  height: 100%;
  flex: 1;
  flex-direction: column;
  background-image: url("../resource/side-bg.png");
  background-size: cover;
  justify-content: space-between;
  font-size: larger;
  text-align: center;
  color: whitesmoke;
}

.Header {
  display: flex;
  flex: 1;
  padding-top: 5%;
  padding-bottom: 5%;
  height: 100%;
  width: 100%;
  align-content: center;
  justify-content: center;
}

.Menu {
  flex: 3;
  display: flex;
  flex-direction: column;
  padding: 0px;
  height: 100%;
}

.Footer {
  display: flex;
  flex: 1;
  flex-direction: column;
  margin-top: auto;
  align-self: flex-end;
}