footer page end distance - reactjs

Question

I added a footer to my page. When it is a page length it covers the content.
There should be a distance between the end of the page and the footer.
It's ok when the page is 100 percent, but it happens when the page gets longer
But I want a distance between.This is scss.
.footer {
display: flex;
background-color: #222831;
min-height: 5vh;
justify-content: space-between;
padding: 10px;
align-items: center;
position: fixed;
left: 0;
bottom: 0;
width: 100%;
This is my layout
import React from "react";
import Footer from "./footer";
import Header from "./header";
const Layout = ({ children }) => {
return (
<div className="layout">
<Header />
<div className="children">{children}</div>
<Footer></Footer>
</div>
);
};
export default Layout;
This is my footer
import {
AiFillLinkedin,
AiFillGithub,
AiFillInstagram,
AiOutlineMail,
} from "react-icons/ai";
export default function Footer() {
return (
<div className="footer">
<div className="logo">
<span className="bracket">{"<"}</span>
<p>Handcrafted by</p>
<span className="bracket">{"{"}</span>
<span className="name">{"ömer"}</span>
<span className="bracket">{"}"}</span>
<span className="bracket">{"/>"}</span>
</div>
<div className="icons">
<a href="https://www.linkedin.com/in/omersahin1/">
<AiFillLinkedin className="icon" size={20} />
</a>
<a href="https://github.com/1sahinomer1">
<AiFillGithub className="icon" size={20} />
</a>
<a href="https://github.com/shnomr">
<AiFillInstagram className="icon" size={20} />
</a>
<a href="mailto:1sahinomer1#gmail.com">
<AiOutlineMail className="icon" size={20} />
</a>
</div>
</div>
);
}
Thank you.