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

Question

我有两列布局。边栏具有固定的宽度。右侧应垂直生长，但不应水平生长。 Flexbox模型伤了我的大脑。如何使滑动轮播不扩展父区块？

在codepen中看不到此内容，但浏览器中会出现水平滚动条。尝试调整窗口大小-奇怪的事情发生了，它越来越大。

再过一次。我需要右侧（alt-right及其所有内容）不沿水平方向扩展。而且我需要alt-right和alt-sidebar的高度相等（如果它们为空，则高度应垂直适合屏幕）。

HTML：

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

CSS：

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

JS：

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',
        },
    });

Codepen