Content within card stretches page when overflow occurs

I am working on a little productivity hub, where each card acts as a different section in the dashboard. For my todo card, whenever I add more content, the page stretches, isntead of the just making the card scroll itself. I am a little new to CSS btw!

Here is the code snippet and what it looks like:

App Screenshot

And here is the code for the parent and child components:

body,html {  height: 100%;  margin: 0;  padding: 0;  display: flex;  flex-direction: column;  overflow: hidden;}.main {  background-color: red;  display: grid;  padding: 25px;  grid-template-columns: 1fr 1fr 1fr;  grid-template-rows: 1fr 1fr 1fr;  grid-template-areas:"c1 c2 c3""c4 c5 c5""c4 c5 c5";  gap: 20px;  flex: 1;  min-height: 100vh;  width: 100%;  box-sizing: border-box;  overflow: hidden;}.card {  background-color: black;  border-radius: 10px;}.card:nth-child(4) {  grid-area: c4;  display: flex;  flex-direction: column;  align-items: stretch;   height: 100%;  width: 100%;  overflow: hidden;}

And whenever it stretches it looks like this:

Stretched card