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

Question

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

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

再来一次。我需要右侧(alt-右边和它的所有内容)不要在水平方向扩展。我需要同样高的alt-右和alt-侧边栏(如果他们是空的，高度应该垂直适合屏幕)。

<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

尝试将父容器设置为最小宽度:0