I am facing an issue with my parent div's height when adding more children. Despite setting the height of the parent to auto or not specifying a height at all, it ends up with a random height that does not seem to match the sum of its children. Even inspecting the element does not reveal where this extra height is coming from. Here is the CSS for the parent:
.main-container{
justify-content: center;
background-color:rgb(255, 40, 40);
border-radius: 20px;
height: auto;
width: 100%;
margin-right: 10px;
}