Why does flex start shrinking vertically, below a certain width? - html

Question

I'm just testing out flex with a simple layout and I noticed that when I inspect the page and test it's responsiveness, when it gets below around 400px in width, the content start shrinking vertically, leaving a bunch of empty on the bottom space as show below. Is it normal for flex to do this below a certain width? if so, do you just use media queries to fix this or is there another method?
(the top is just header with shrunken items, which is why it looks weird)
Here is the link as I'm not yet allowed to post pictures
* {
margin: 0;
padding: 0;
overflow-y: hidden;
}
#mainContent{
display: flex;
background-color: rgb(208, 255, 218);
}
.sideNav{
background-color: rgb(159, 255, 134);
padding: 100% 2% 100% 2%;
}
Home Component
import React from 'react'
import Header from './Header';
import SideBar from './SideBar';
function Home() {
return (
<div>
<Header></Header>
<div id='mainContent'>
<SideBar></SideBar>
</div>
</div>
)
}
export default Home
Header Component
import React from 'react'
import {BrowserRouter as Link} from "react-router-dom";
function Header() {
return (
<div>
<navbar className="nav-bar">
<ul className="navItems">
<li>
<h1>Groupster</h1>
</li>
<li>
<Link to='/'>Home</Link>
</li>
<li>
<Link to='/login'>Login</Link>
</li>
</ul>
</navbar>
</div>
)
}
export default Header
SideBar Component
import React from 'react';
function SideBar() {
return (
<div className='sideNav'></div>
)
}
export default SideBar