我使用 slick 创建了一个动态轮播，但如果添加更多文本或按钮，轮播的大小会发生变化并向上对齐

如何解决我使用 slick 创建了一个动态轮播，但如果添加更多文本或按钮，轮播的大小会发生变化并向上对齐

请先参考截图：https://prnt.sc/13e3z3y

我可能无法很好地表达它，但我已经在下面展示了它。

我刚刚添加了 1 个游戏的详细信息。

我想要实现的是，如果我需要添加有关游戏的更多细节，我应该能够添加并保持旋转木马盒的大小不变。

HTML：

<section id=work>
<div class="page-warpper">
<div class="post-slider">
<h1 class="slider-title"> Projects / Games</h1>
<i class="fa fa-chevron-left prev"></i>
<i class="fa fa-chevron-right next"></i>
<div class="post-wrapper">
<!-- ---------------------------------------------------------- post 1------------------------------>
<div class="post">
   <div class="iframe-container">
      <iframe src="https://www.youtube.com/embed/ogTb01d1Ta0" title="YouTube video player"
         frameborder="0"
         allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
         allowfullscreen></iframe>
   </div>
   <div class="post-info">
      <h4>Tank Raider(3D)</h4>
      <br><b>Game Overview :</b>
      <br>
      <br> - Tank movement / firing
      <br> - Tank Spawning
      <br> - Implemented game design patterns i,e. object pooling,coroutines
      <br> - AI state machine using Navmesh
      <br>blah
      <br>vlah
      <br>bakssald
      <br>stackoverflow test
      <div class="cont">
         <button class="btn btn1">Play on Unity</button>
         <button class="btn btn2">GitHub Repo</button>
      </div>
   </div>
</div>

CSS：

#work {
    margin-top: 1%;
    padding: 0 0;
    width: 100%;
    /* height: 100vh; */
   
}
.post-slider {
    /* border: 1px solid red; */
    color: whitesmoke;
}

.post-slider .slider-title {
    text-align: center;
    margin: 30px auto;
    font-family: 'candal' serif;
    color: #0077b5;
    font-size: 3rem;
    text-shadow:  0 1px 2px beige;
}

.post-slider .post-wrapper {
    width: 90%;
    height: 700px;
    overflow: hidden;
    text-overflow: clip;
    margin: 0px auto;
    padding: 10px 0 10px 0;
}

.post-slider .post-wrapper .post {
    background: rgba(230,212,0.1);
    width: 500px;
    height: 680px;
    display: inline-block;
    
    margin: 0px 20px;
    border: 1px 1px solid #0077b5;
    border-radius: 7px;
    Box-shadow: 1rem 1rem 1rem -1rem #0077b5;
}

.post-slider .post-wrapper .post .post-info {
    height: 335px;
    text-align: center;
    font-size: 1rem;
    /* border: 1px solid #0077b5; */  
}

.post-slider .post-wrapper .post .post-info h4 {
    font-size: 2rem;
}

.post-slider .next {
    position: absolute;
    top: 50%;
    right: 30px;
    font-size: 2rem;
    color: #0077b5;
    cursor: pointer;
}

.post-slider .prev {
    position: absolute;
    top: 50%;
    left: 30px;
    font-size: 2rem;
    color: #0077b5 ;
    cursor: pointer;
}

.post-slider .post-wrapper .post .post-info .cont {
    text-align: center;
    top: 100%;
}

.btn {
    cursor: pointer;
    border: 2px solid #0077b5;
    background: none;
    padding: 10px 20px;
    font-size: 13px;
    color: whitesmoke;
    /* font-family: "montserrat"; */
    transition: 0.8s;
    margin: 10px;
}

.btn1:hover {
    transform: scale(1.05);
    color: #0077b5;
    text-shadow: 0 0 15px #0077b5;
    transition: all 0.5s ease;   
}
 .btn2:hover {
    transform: scale(1.05);
    color: #0077b5;
    text-shadow: 0 0 15px #0077b5;
    transition: all 0.5s ease;  
 }

.iframe-container iframe {
    width:100%; 
    height: 315px;
    border-top-left-radius: 10px;
    border-top-right-radius:10px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}