我試圖只用html css和javascript制作一個旋轉木馬，當屏幕尺寸減小時，我面臨著一個旋轉木馬卡的問題，所用的css是嵌套的flex-box，請查看下面的代碼以了解更多信息。

<section class="managers flex-column">
      <div class="managers-btns flex-row">
        <button class="btn">btn1</button>
        <button class="btn btn-active">btn2</button>
      </div>

      <!--  Problem are below -->

      <div class="manager-card-parent">
        <i id="left" class="fa-solid fa-angle-left"></i>
        <div class="carousel">
          <div class="manager-card-wrapper">
            <div class="manager-card">
              <img src="assets/slider1.png" alt="manager">
              <div class="flex-row manager-card-content">
                <img src="assets/twitter.svg" alt="twitter">
                <div>
                  <h3>Mohammed Abdullah</h3>
                  <p>Business Development Manager</p>
                </div>
              </div>
            </div>
          </div>
          <div class="manager-card-wrapper">
            <div class="manager-card">
              <img src="assets/slider2.png" alt="manager">
              <div class="flex-row manager-card-content">
                <img src="assets/twitter.svg" alt="twitter">
                <div>
                  <h3>Mohammed Abdullah</h3>
                  <p>Business Development Manager</p>
                </div>
              </div>
            </div>
          </div>
          <div class="manager-card-wrapper">
            <div class="manager-card">
              <img src="assets/slider3.png" alt="manager">
              <div class="flex-row manager-card-content">
                <img src="assets/twitter.svg" alt="twitter">
                <div>
                  <h3>Mohammed Abdullah</h3>
                  <p>Business Development Manager</p>
                </div>
              </div>
            </div>
          </div>
          <div class="manager-card-wrapper">
            <div class="manager-card">
              <img src="assets/slider4.png" alt="manager">
              <div class="flex-row manager-card-content">
                <img src="assets/twitter.svg" alt="twitter">
                <div>
                  <h3>Mohammed Abdullah</h3>
                  <p>Business Development Manager</p>
                </div>
              </div>
            </div>
          </div>
          <div class="manager-card-wrapper">
            <div class="manager-card">
              <img src="assets/slider5.png" alt="manager">
              <div class="flex-row manager-card-content">
                <img src="assets/twitter.svg" alt="twitter">
                <div>
                  <h3>Mohammed Abdullah</h3>
                  <p>Business Development Manager</p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <i id="right" class="fa-solid fa-angle-right"></i>
      </div>
     
    </section>

下面是使用的CSS:

.manager-card-parent {
  max-width: 1056px;
  position: relative;
  width: 100%;
}

.manager-card-parent i {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 44px;
  width: 44px;
  cursor: pointer;
  font-size: 1.2rem;
  text-align: center;
  line-height: 44px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.1s linear;
  z-index: 10;
}

.manager-card-parent i:active {
  transform: translateY(-50%) scale(0.9);
}

.manager-card-parent i:hover {
  background: #f2f2f2;
}

.manager-card-parent i:first-child {
  left: -22px;
  /* opacity: 0.5; */
}
.manager-card-parent i:last-child {
  right: -22px;
}

.manager-card-parent .carousel {
  width: 100%;
  display: flex;
  cursor: pointer;
  overflow: hidden;
  scroll-behavior: smooth;
  gap: 2rem;
}

.carousel.dragging {
  cursor: grab;
  scroll-behavior: auto;
}

.manager-card {
  width: 240px;
  height: 395px;
  position: relative;
}

.manager-card-wrapper:nth-child(odd) {
  margin-top: 65px;
}
.manager-card-wrapper:nth-child(even) {
  margin-bottom: 65px;
}

.manager-card::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: hsla(0, 0%, 94%, 0.67);
  z-index: 0;
}

.manager-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.manager-card-content {
  position: absolute;
  left: -50px;
  bottom: 10px;
  gap: 1.2rem;
  white-space: nowrap;
  z-index: 5;
}

.manager-card-content h3 {
  font-size: 22px;
  color: var(--black);
}

.manager-card-content p {
  color: var(--gray);
  font-size: 9px;
}

@media screen and (max-width: 359px) {
  .manager-card {
    width: 162px;
    height: 262px;
  }
  .manager-card-content {
    position: absolute;
    left: -35px;
    gap: 0.5rem;
  }

  .manager-card-content h3 {
    font-size: 14px;
  }
}

預計轉盤將只占據100%的父寬度，其余的卡片將被隱藏。