How do I make the overflow of an element push the other element down

Issue

So I have this content but I want the footer to be pushed down instead of it overflowing, but i don't want it hidden so overflow hidden is not an option and going behind the footer. Can anyone help and if you have any useful comments to change my code to make it easier to scale, it would also be deeply appreaciated.

The text themselves do not have any CSS on them, do I need to put something on the texts?

So the child is :

<child container>
<img>
<text>
<child container>

parent: 
    display: flex;
    flex-direction: column;
    min-height: 90vh;
    margin-top: 5rem;

child
.mini-product-card {
    display: flex;
    flex-wrap: nowrap;
    margin: 0.5rem;
    height: 35vh;
    width: 35vh;
    font-size: 3vw;
    position: relative;
}

.mini-product-card-img{
    height: 100%;
    width: 100%;
}

Solution

Giving a height value to a container and not enforcing that height on the container's inner content can result in an overflow.

Example:

body {
  display: flex;
}

.container1,
.container2 {
  width: 45%;
  margin: 5px;
  padding: 5px;
  border: solid 1px;
}

.container1 {
height: 230px;
}

.container2 img {
height: 160px;
}

.container2 p {
height: 30px;
overflow-y: scroll;
}

<div class="container1">
  <img src="https://picsum.photos/200">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
</div>

<div class="container2">
  <img src="https://picsum.photos/200">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
</div>

Answered By - Matan Sanbira