How to make swiper slider not to expand its parent block?

Question

I have two columns layout. Sidebar has fixed width. Right side should grow vertically but shouldn't in horizontal direction. Flexbox model broken my brain. How to make swiper carousel not expand parent block?

In Codepen, you can't see this, but horizontal scroll bar appears in browser. Try to resize window - something strange happens, it expands more and more.

One more time. I need right side (alt-right and all its content) not expand in horizontal direction. And I need equal height for alt-right and alt-sidebar (if they are empty, height should vertically fit screen).

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

Codepen

Answer 1

Try to set the parent's container to min-width: 0