Я использую согнутый div.Прямо сейчас, когда я добавляю много текста внутри него, это как-то заставляет div'ов двигаться и терять свою позицию, надеюсь, вы, ребята, могли бы помочь.
picture 1: 
изображение 2: 
Как вы видите на фотографиях, где не так много текста, все работает хорошо, но немного лорема и все идет плохо -и размеры внутри div тоже меняются, хотя я использовал flex-grow по 3 для каждого из них
html:
<section id='portfolio'>
<h1>My Projects</h1>
<div class="slider">
<div class="left">
<span class="left-arrow"></span> </div>
<ul>
<li class="slider-item">
<div class="app">
<img src="./images/movies.jpg" alt="">
<ul>
<li>Name: Movies WebApp</li>
<li>Description: Manage movise stock Lorem, ipsum dolor sit amet consectetur adipisicing elit. Molestiae asperiores obcaecati quaerat fugit nisi dolore optio possimus facere ratione, maiores dicta earum aut tempora unde facilis vitae vero, quas totam.</li>
<li>Backend: -</li>
<li>Frontend: Angular, CSS, Html</li>
<li>DB: -</li>
</ul>
</li>
</ul>
<div class="right"><span class="right-arrow"></span></div>
<ol class="pagination">
</ol>
</div>
</div>
</section>
css:
.slider {
min-width: 100%;
flex-wrap: wrap;
display: flex;
justify-content: center;
}
.slider ul {
flex-grow: 10;
min-height: 300px;
justify-content: center;
}
.slider ul .slider-item {
min-height: 300px;
display: flex;
position: relative;
}
.app {
padding: 20px;
width: 100%;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
background-color: rgb(0, 0, 0);
overflow: hidden;
box-sizing: border-box;
}
.app img {
min-width: 500px;
height: 300px;
flex-grow: 3;
}
.app ul {
overflow: hidden;
display: flex;
flex-direction: column;
margin-left: 20px;
color: black;
width: 100%;
flex-grow: 3;
justify-content: center;
background-color: aqua;
}
.app ul li {
flex-grow: 1;
}
.right,
.left {
padding: 20px;
flex-grow: 1;
position: relative;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
transition: 0.3s;
position: relative;
min-width: 40px;
flex-wrap: nowrap;
}
.left-arrow {
position: absolute;
left: 30px;
width: 20px;
height: 20px;
border-left: 2px solid rgb(163, 163, 163);
border-bottom: 2px solid rgb(163, 163, 163);
transform: rotate(45deg);
cursor: pointer;
transition: 0.3s;
}
.right-arrow {
position: absolute;
right: 30px;
width: 20px;
height: 20px;
border-right: 2px solid rgb(163, 163, 163);
border-bottom: 2px solid rgb(163, 163, 163);
transform: rotate(-45deg);
cursor: pointer;
transition: 0.5s;
}