html - 当在 div 中添加大量文本时，下一个元素会向下移动

Question

我使用的是 flex div。现在，当我在其中添加大量文本时，不知何故会使 div 接近移动并失去它们的位置，希望你们能帮忙。

图一:

图二:

正如您在图片中看到的那样，没有太多文本的地方一切正常，但有一点点定数，一切都变坏了 - 即使我在每个 flex-grow 上使用 3，div 内的大小也会发生变化他们

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

Answer 1

.slider {
  min-width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.slider > ul {
  padding-left: 0;
  width: calc(100% - 160px);
}

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

<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>