如何使 swiper 滑块不扩展其父块？

Question

我有两列布局。侧边栏具有固定宽度。右侧应该垂直增长，但不应该在水平方向。Flexbox 模型打破了我的大脑。如何使 swiper carousel 不扩展父块？

在 Codepen 中，您看不到这一点，但浏览器中会出现水平滚动条。尝试调整窗口大小 - 发生了一些奇怪的事情，它会越来越大。

再一次。我需要右侧（alt-right 及其所有内容）不要在水平方向上扩展。我需要为 alt-right 和 alt-sidebar 设置相同的高度（如果它们是空的，高度应该垂直适合屏幕）。

<div class="alt-wrapper">
  <div class="alt-top">
    <div class="alt-sidebar">
      ff
    </div>
    <div class="alt-right">
      <div class="alt-header">
        f
      </div>
      <div class="alt-content">
        <div class="swiper-container">
          <!-- Additional required wrapper -->
          <div class="swiper-wrapper">
            <!-- Slides -->
            <div class="swiper-slide">
              <div style="background-color: darkolivegreen">afas</div>
            </div>
            <div class="swiper-slide">
              <div style="background-color: darkolivegreen">afas</div>
            </div>
            <div class="swiper-slide">
              <div style="background-color: darkolivegreen">afas</div>
            </div>
            <div class="swiper-slide">Slide 2</div>

            <div class="swiper-slide">
              <div style="background-color: darkolivegreen">afas</div>
            </div>
          </div>
          <!-- If we need pagination -->
          <div class="swiper-pagination"></div>

          <!-- If we need navigation buttons -->
          <div class="swiper-button-prev"></div>
          <div class="swiper-button-next"></div>

          <!-- If we need scrollbar -->
          <div class="swiper-scrollbar"></div>
        </div>
      </div>
    </div>
  </div>
  <div class="alt-footer"></div>
</div>

body {
  background-color: red;
}
body, html {
  height: 100%;
}
.alt-wrapper {
  display: flex;
  flex-direction: column;
  background-color: red;
  min-height: 100%;
  flex: 1 1 100%;
  overflow: hidden;
  //height: 100%;
  //width: 100%;
}
.alt-top {
  display: flex;
  background-color: gold;
  min-height: 100%;
  flex: 1 1 100%;
}
.alt-footer {
  display: flex;
  flex-direction: column;
  height: 60px;
  background-color: greenyellow;
}
.alt-content {
  display: inline-flex;
  flex-direction: column;
  min-height: 100%;
  max-width: 100%;
  padding: 1.6rem;

  flex: 1 1 100%;
}
.alt-sidebar {
  display: flex;
  min-height: 100%;
  width: 30rem;
  max-width: 30rem;
  background-color: aquamarine;
  flex: 0 0 100%;
}
.alt-right {
  display: flex;
  flex-direction: column;
  flex: 0 1 100%;
}
.alt-header {
  display: flex;
  flex-direction: column;
  min-height: 60px;
  background-color: greenyellow;
}

var mySwiper = new Swiper ('.swiper-container', {
  // Optional parameters
  direction: 'horizontal',
  loop: true,
  slidesPerView: 2,
  // If we need pagination
  pagination: {
    el: '.swiper-pagination',
  },

  // Navigation arrows
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },

  // And if we need scrollbar
  scrollbar: {
    el: '.swiper-scrollbar',
  },
});

代码笔

Answer 1

尝试将父容器设置为 min-width: 0