为什么页面宽度低于特定值时flex布局会出现内容垂直收缩现象？

这种表现是正常的，不属于Flex布局的bug，是CSS基础规则导致的，具体原因如下：

• 所有百分比形式的padding值（包含上下padding），默认都是相对于父元素的宽度计算。你的.sideNav设置了padding: 100% 2%，上下padding等于父容器#mainContent的宽度，页面宽度缩小时父容器宽度同步变小，上下padding自然收缩，直接导致侧边栏高度降低，底部出现空白。
• 全局规则* { overflow-y: hidden }会隐藏超出视口的内容，也不会触发滚动条，空白区域会更明显。
• 目前#mainContent没有设置固定/最小高度，高度完全由子元素的padding撑开，所以高度会随页面宽度变化。

你可以根据需求任选以下方案：

1. 用视口高度单位固定侧边栏高度
   把.sideNav的上下padding替换为vh单位（1vh等于1%视口高度），避免受父元素宽度影响：

.sideNav{
  background-color: rgb(159, 255, 134);
  /* 按需调整vh数值，适配你需要的侧边栏高度 */
  padding: 85vh 2% 85vh 2%;
}

2. 让flex容器占满剩余视口高度，子元素自动拉伸
   修改全局和flex容器相关样式：

* { 
    margin: 0;
    padding: 0;
    /* 不要全局加overflow-y:hidden，按需给需要的元素加即可 */
}
html,body,#root,.home-wrapper {
  height: 100%;
}
#mainContent{
  display: flex;
  background-color: rgb(208, 255, 218);
  /* 减去Header的实际高度即可，比如Header高60px就填60px */
  min-height: calc(100vh - 60px);
  /* flex子元素默认拉伸填满容器高度 */
  align-items: stretch;
}
.sideNav{
  background-color: rgb(159, 255, 134);
  /* 只保留左右padding即可，高度会自动撑满容器 */
  padding: 0 2%;
}

同时给Home组件最外层div加类名匹配上面的.home-wrapper：

function Home() {
  return (
      <div className="home-wrapper">
        <Header></Header>
        <div id='mainContent'>
            <SideBar></SideBar>
        </div>
      </div>
  )
}

你Header组件里的Link引入写错了，正确写法是：

import { Link } from "react-router-dom";

原来的{BrowserRouter as Link}会导致路由跳转功能异常。

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