Why that Div has additional space at bottom? How to make it height fit to children?[Mobile]

i want to make that div full height without additional space at bottom. I am adding a link to codepen. I am talking about mobile resolution only, problem with media queries.
Image
Codepen: Link

.main-sidebar {
      display: flex;
      flex-direction: column;
      background-color: var(--VeryDarkBlue);
      padding: 2.1875rem 1.5625rem;
      min-height: 100%;
      overflow: hidden;
    }
    .main-sidebar h2 {
      color: hsl(35, 77%, 62%);
      font-size: 2.8125rem;
      font-weight: 700;
    }
    .main-sidebar-container {
      display: flex;
      flex-direction: column;
      padding: 1.875rem 0;
      border-bottom: solid 1px var(--DarkGrayishBlue);
    }
    .main-sidebar-container:last-child {
      border-bottom: none;
    }
    .main-sidebar-container-header {
      color: var(--Offwhite);
      font-weight: 700;
      font-size: 1.25rem;
      margin-bottom: .9375rem;
    }
    .main-sidebar-container-description {
      color: var(--Grayishblue);
      line-height: 1.5625rem;
    }

I tried a lot of things, but none of them worked. I am begginer, thanks for help

I suppose the issue that you have is for max-width:900px media?

min-height: 100% in .main-sidebar is causing the problem, you can give height:100% and overflow: unset instead.

I got the problem is in mobile resolution. For Mobile @media (max-width:900px) {}

The issue is in class .main-sidebar where you set a property of min-height: 100%;

You may use height property. For temporary solution you can also use min-height: 60%;

Moreover, whenever we write CSS code it should be in proper structure. we should define height and width for block element and the block elements CSS code should be written in hierarchy so that debugging got easy.

I took the liberty of correcting your code by removing all redundant parts and adding another breakpoint. I hope this solves your problem. <br> Sorry I had to use some random images since I had no access to your assets folder.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;700;800&display=swap");
/* http://meyerweb.com/eric/tools/css/reset/ 
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
padding: 20px 5rem;
font-family: "Inter", sans-serif;
}
ol, ul {
list-style: none;
}
blockquote,
q {
quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
content: "";
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
:root {
--Offwhite: hsl(36, 100%, 99%);
--Grayishblue: hsl(233, 8%, 79%);
--DarkGrayishBlue: hsl(236, 13%, 42%);
--VeryDarkBlue: hsl(240, 100%, 5%);
--SoftOrange: hsl(35, 77%, 62%);
--SoftRed: hsl(5, 85%, 63%);
--gap: 1.875rem;
--pad: 2rem;
}
.navbar {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
margin-bottom: var(--gap);
}
.navbar-list {
display: flex;
justify-content: space-between;
gap: 2.5rem;
}
.navbar-link {
text-decoration: none;
color: var(--DarkGrayishBlue);
}
.main-wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--gap);
grid-template-areas: 
"main-image main-image main-sidebar"
"main-bottom main-bottom main-sidebar"
"box-container box-container box-container"
;
}
.main-image {
grid-area: main-image;
background-image: url(//unsplash.it/800/800);
background-size: cover;
background-position: center;
height: 18.75rem;
}
.main-bottom {
grid-area: main-bottom;
display: grid; 
gap: var(--gap); 
grid-template-columns: 1fr 1fr;
}
.main-bottom-first-container h1 {
font-size: 3.4375rem;
font-weight: 800;
color: var(--VeryDarkBlue);
}
.main-bottom-second-container p {
color: var(--DarkGrayishBlue);
font-size: 1rem;
line-height: 1.5625rem;
margin-bottom: var(--gap);
}
.main-bottom-second-container button {
text-transform: uppercase;
letter-spacing: 0.3125rem;
font-weight: 700;
color: var(--Offwhite);
background-color: hsl(5, 85%, 63%);
padding: 0.9375rem var(--gap);
border: none;
}
.main-sidebar {
grid-area: main-sidebar;
display: flex;
flex-direction: column;
gap: var(--gap);
background-color: var(--VeryDarkBlue);
padding: var(--pad);
}
.main-sidebar h2 {
color: hsl(35, 77%, 62%);
font-size: 2.8125rem;
font-weight: 700;
}
.main-sidebar-container:not(:last-child) {
padding-bottom: var(--gap);
border-bottom: solid 1px var(--DarkGrayishBlue);
}
.main-sidebar-container-header {
color: var(--Offwhite);
font-weight: 700;
font-size: 1.25rem;
}
.main-sidebar-container-description {
color: var(--Grayishblue);
line-height: 1.5625rem;
}
.left_box_container {
grid-area: box-container;
display: grid; 
grid-template-columns: 1fr 1fr 1fr;
gap: var(--gap);
}
.__box {
display: flex;
flex-direction: column;
gap: 0rem;
}
.box_image {
height: 6.25rem; 
max-width: 100%;
}
.box_container {
display: flex;
flex-direction: column;
gap: .5rem;
padding: var(--pad);
}
.box_number {
font-size: 1.625rem;
font-weight: 700;
color: var(--Grayishblue);
}
.box_header {
font-size: 1.125rem;
font-weight: 800;
color: var(--VeryDarkBlue);
}
.box_description {
color: var(--DarkGrayishBlue);
font-size: 0.9375rem;
line-height: 1.5625rem;
}
#box_first_image {
background-image: url(//unsplash.it/400/399);
background-size: cover;
background-position: center;
}
#box_second_image {
background-image: url(//unsplash.it/400/400);
background-size: cover;
background-position: center;
}
#box_third_image {
background-image: url(//unsplash.it/400/401);
background-size: cover;
background-position: center;
}
.attribution {
display: none;
margin: var(--gap) 0;
}
/* Actives */
.navbar-link:hover {
color: var(--SoftRed);
}
.main-sidebar-container-header:hover {
cursor: pointer;
color: var(--SoftOrange);
}
.main-bottom-second-container > button:hover {
cursor: pointer;
color: white;
background-color: black;
}
.box_header:hover {
cursor: pointer;
color: var(--SoftRed);
}
/* Tablet */
@media (max-width: 1045px) {
body {
padding: 20px;
}
#logo {
transform: scale(0.9);
}
.main-wrapper {
grid-template-columns: 1fr 1fr;
grid-template-areas: 
"main-image main-image"
"main-bottom main-bottom"
"main-sidebar box-container"
"main-sidebar box-container";
}
.main-sidebar {
align-self: start;;
}
.left_box_container {
grid-template-columns: 1fr;
}
}
/* Phone */
@media (max-width: 700px) {
.navbar {
flex-direction: column;
gap: var(--gap);
}
.navbar-list {
gap: 1rem;
}
.main-wrapper {
grid-template-columns: 1fr;
grid-template-areas: 
"main-image"
"main-bottom"
"main-sidebar"
"box-container";
}
.main-bottom {
grid-template-columns: 1fr;
}
}

<!-- language: lang-html -->

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- displays site properly based on user's device -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="icon" type="image/png" sizes="32x32" href="./assets/images/favicon-32x32.png">
<link rel="stylesheet" href="test.css" type="text/css">
<title>Frontend Mentor | News homepage</title>
<!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
<style>
.attribution {
font-size: 11px;
text-align: center;
}
.attribution a {
color: hsl(228, 45%, 44%);
}
</style>
</head>
<body>
<nav class="navbar">
<img src="//unsplash.it/75/75" alt="logo" id="logo">
<ul class="navbar-list">
<li><a href="#" class="navbar-link">Home</a></li>
<li><a href="#" class="navbar-link">New</a></li>
<li><a href="#" class="navbar-link">Popular</a></li>
<li><a href="#" class="navbar-link">Trending</a></li>
<li><a href="#" class="navbar-link">Categories</a></li>
</ul>
</nav>
<main class="main-wrapper">
<div class="main-image"></div>
<div class="main-bottom">
<div class="main-bottom-first-container">
<h1>The Bright Future of Web 3.0?</h1>
</div>
<div class="main-bottom-second-container">
<p>We dive into the next evolution of the web that claims to put the power of the platforms back into the
hands of the people. But is it really fulfilling its promise?</p>
<button>Read more</button>
</div>
</div>
<aside class="main-sidebar">
<h2>New</h2>
<div class="main-sidebar-container">
<h3 class="main-sidebar-container-header">Hydrogen VS Electric Cars</h3>
<p class="main-sidebar-container-description">Will hydrogen-fueled cars ever catch up to EVs?</p>
</div>
<div class="main-sidebar-container">
<h3 class="main-sidebar-container-header">The Downsides of AI Artistry</h3>
<p class="main-sidebar-container-description">What are the possible adverse effects of on-demand AI image
generation?</p>
</div>
<div class="main-sidebar-container">
<h3 class="main-sidebar-container-header">Is VC Funding Drying Up?</h3>
<p class="main-sidebar-container-description">Private funding by VC firms is down 50% YOY. We take a look at
what that means.</p>
</div>
</aside>
<div class="left_box_container">
<div class="__box">
<div class="box_image" id="box_first_image"></div>
<div class="box_container">
<div class="box_number">01</div>
<div class="box_header">Reviving Retro PCs</div>
<div class="box_description">What happens when old PCs are given modern upgrades?</div>
</div>
</div>
<div class="__box">
<div class="box_image" id="box_second_image"></div>
<div class="box_container">
<div class="box_number">02</div>
<div class="box_header">Top 10 Laptops of 2022</div>
<div class="box_description">Our best picks for various needs and budgets.</div>
</div>
</div>
<div class="__box">
<div class="box_image" id="box_third_image"></div>
<div class="box_container">
<div class="box_number">03</div>
<div class="box_header">The Growth of Gaming</div>
<div class="box_description">How the pandemic has sparked fresh opportunities.</div>
</div>
</div>
</div>
</main>
<footer class="attribution">
Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
Coded by <a href="#">Your Name Here</a>.
</footer>
</body>
</html>

<!-- end snippet -->