Как сделать переполнение элемента pu sh другим элементом вниз

Question

Итак, у меня есть этот контент, но я хочу, чтобы нижний колонтитул был сдвинут вниз, а не переполнен, но я не хочу, чтобы он скрывался, поэтому скрытый переполнение - это не вариант, а выход за нижний колонтитул. Может кто-нибудь помочь, и если у вас есть какие-либо полезные комментарии, чтобы изменить мой код, чтобы его было легче масштабировать, он также был бы глубоко оценен.

В самом тексте нет CSS, нужно ли мне поставить что-нибудь на тексты?

Итак, ребенок:

<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%;
}

Answer 1

Вы должны понимать, что предоставление значения высоты контейнеру и не информирование о том, что высота содержимого внутри может привести к переполнению.

пример:

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>