Flex-макет сломан с помощью swiper.js

Question

Задача

Гибкая компоновка нарушается при изменении ширины или высоты браузера.
Я пытался это исправить, но я не мог это исправить ..
Пожалуйста, помогите мне!

Кстати, я использую плагин JS swiper .

---

код

, поскольку он плохо работал с фрагментами кода, я написал JSFiddle .
Таким образом, даже если 1 или 11 или 111 .. являются элементами page_1, они в конечном итоге включены в page_2. (
(2, 22 или 222 .. являются элементами страницы_2.)

Полноэкранная скрипта здесь .

▼ Это только код. Фрагменты кода не работают должным образом. Пожалуйста, посмотрите на JSFiddle.

/*var swiper = new Swiper('.swiper-container', {
  direction: 'vertical',
  pagination: {
    el: '.swiper-pagination',
    type: 'bullets',
    clickable: 'true',
  },
  keyboard: {
    enabled: true,
  },
  mousewheel: {
    forceToAxis: true,
    invert: true,
  },
});*/

html {font-size: 62.5%;}

body {
  display: flex;
  max-height: 100vh;
}

.content {
  display: flex;
  margin: 1rem;
  width: 100vw;
  height: 61.9rem;
  position: relative;
  background: lightgray;
  border: 1px solid #fff;
  border-radius: 5px;
  box-shadow: 0 -2px 3px -2px rgba(0,0,0,.5);
}


/* ***** LEFT ***** */
.left {
  padding: 0 0 0 5.6rem;
  width: 33.5rem;
  display: flex;
  flex-direction: column;
}
.lefts {
  height: 51.7rem;
}

.swiper-wrapper {
  justify-content: space-between;
}


.data {
  padding-top: 1.7rem;
  padding-bottom: 1.7rem;
}
.skill li {
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;

  :last-child {
    margin-right: 0;
  }
}
.code {
  margin-top: 1.7rem;
}

figure {
  margin-right: .9rem;
  font-size: 1rem;
  display: grid;
  grid-template: 'meter' auto 'name' min-content / 4.4rem;
  grid-row-gap: .5rem
}
figure .meter {
  width: 100%;
}
figure figcaption {
  justify-self: center;
  min-width: 0;
}
.meter-t {
  width: 50%;
  height: 50%;
}
figure img {
  grid-area: meter;
  align-self: center;
  justify-self: center;
}


/* ***** MIDDLE ***** */
.middle {
  width: 55.2rem;
  flex-grow: 1;
  text-align: center;
  line-height: 0;
  margin-left: 3rem;
  margin-right: 3rem;
  display: flex;
  .swiper-slide {
    display: flex;
    align-items: center;
  }
  img {
    flex: 0 1 auto;
    margin: auto;
  }
}


/* ***** RIGHT ***** */
.right {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0 5.6rem 0 0;
  width: 31.1rem;
}
.attributes > p {
  white-space: pre-wrap;
  &:last-child {
    padding-top: 0;
  }
}

.umm > .data {
  position: relative;
  padding: 0;
  width: 19.3rem;
  height: 20.2438rem;
  span {
    position: absolute;
    padding: 0;
    bottom: 30%;
    right: 7%;
  }
}

<div class="content">

<!--
*LEFT
* -->
    <div class="left">
      <div class="swiper-container">
        <div class="swiper-wrapper">
<!--【Left】page_1 -->
          <div class="swiper-slide">
            <div class="page_1 lefts">
              <section class="name">
                <p class="title">title_1</p>
                <p class="data">data_1</p>
              </section>
              <section class="spec">
                <p class="title">title_11</p>
                <p class="data">data_11</p>
              </section>
              <section class="skill">
                <p class="title">title_111</p>
                <ul class="data">
                  <li class="tool">
                    <figure class="Illustrator">
                      <img class="meter" src="https://placehold.jp/0/5305a6/5305a6/44x44.png?text=_" alt="advanced" />
                      <img class="meter-t" src="https://placehold.jp/0/0570a6/0570a6/22x22.png?text=_" alt="Illustrator" />
                      <figcaption>Illustrator</figcaption>
                    </figure>
                    <figure class="Photoshop">
                      <img class="meter" src="https://placehold.jp/0/5305a6/5305a6/44x44.png?text=_" alt="intermediate" />
                      <img class="meter-t" src="https://placehold.jp/0/0570a6/0570a6/22x22.png?text=_" alt="Photoshop" />
                      <figcaption>Photoshop</figcaption>
                    </figure>
                    <figure class="Indesign">
                      <img class="meter" src="https://placehold.jp/0/5305a6/5305a6/44x44.png?text=_" alt="elementary" />
                      <img class="meter-t" src="https://placehold.jp/0/0570a6/0570a6/22x22.png?text=_" alt="Indesign" />
                      <figcaption>Indesign</figcaption>
                    </figure>
                    <figure class="Vectorworks">
                      <img class="meter" src="https://placehold.jp/0/5305a6/5305a6/44x44.png?text=_" alt="intermediate" />
                      <img class="meter-t" src="https://placehold.jp/0/0570a6/0570a6/22x22.png?text=_" alt="Vectorworks" />
                      <figcaption>Vectorworks</figcaption>
                    </figure>
                    <figure class="Shade">
                      <img class="meter" src="https://placehold.jp/0/5305a6/5305a6/44x44.png?text=_" alt="intermediate" />
                      <img class="meter-t" src="https://placehold.jp/0/0570a6/0570a6/22x22.png?text=_" alt="Shade" />
                      <figcaption>Shade</figcaption>
                    </figure>
                  </li>
                  <li class="code">
                    <figure class="HTML">
                      <img class="meter" src="https://placehold.jp/0/5305a6/5305a6/44x44.png?text=_" alt="elementary" />
                      <img class="meter-t" src="https://placehold.jp/0/0570a6/0570a6/22x22.png?text=_" alt="HTML" />
                      <figcaption>HTML</figcaption>
                    </figure>
                    <figure class="CSS">
                      <img class="meter" src="https://placehold.jp/0/5305a6/5305a6/44x44.png?text=_" alt="elementary" />
                      <img class="meter-t" src="https://placehold.jp/0/0570a6/0570a6/22x22.png?text=_" alt="CSS" />
                      <figcaption>CSS</figcaption>
                    </figure>
                    <figure class="Javascript">
                      <img class="meter" src="https://placehold.jp/0/5305a6/5305a6/44x44.png?text=_" alt="beginner" />
                      <img class="meter-t" src="https://placehold.jp/0/0570a6/0570a6/22x22.png?text=_" alt="Javascript" />
                      <figcaption>Javascript</figcaption>
                    </figure>
                    <figure class="PHP">
                      <img class="meter" src="https://placehold.jp/0/5305a6/5305a6/44x44.png?text=_" alt="beginner" />
                      <img class="meter-t" src="https://placehold.jp/0/0570a6/0570a6/22x22.png?text=_" alt="PHP" />
                      <figcaption>PHP</figcaption>
                    </figure>
                  </li>
                </ul>
              </section>
              <section class="hobby">
                <p class="title">title_1111</p>
                <p class="data">data_1111</p>
              </section>
            </div>
          </div>
<!-- /【Left】page_1 -->
<!--【Left】page_2 -->
          <div class="swiper-slide">
            <div class="page_2 lefts">
              <section class="thisis">
                <p class="title">title_2</p>
                <p class="data">data_2</p>
              </section>
              <section class="Q">
                <p class="title">title_22</p>
                <p class="data">data_22</p>
              </section>
            </div>
          </div>
<!-- /【Left】page_2 -->
<!--【Left】page_3 -->
          <div class="swiper-slide">
            <div class="page_3 lefts">
              <section class="thatis">
                <p class="title">title_3</p>
                <p class="data">data_3</p>
              </section>
            </div>
          </div>
<!-- /【Left】page_3 -->
        </div>
      </div>
    </div>


<!-- 
*MIDDLE
*-->
    <div class="middle">
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
<!-- 【middle】page_1 -->
            <div class="page_1 middles">
              <img class="imgs" src="https://placehold.jp/45/a60518/ffffff/411x480.png?text=1" width="411" />
            </div>
          </div>
          <div class="swiper-slide">
<!-- 【middle】page_2 -->
            <div class="page_2 middles">
              <img class="imgs" src="https://placehold.jp/45/1b05a6/ffffff/411x411.png?text=2" width="411" />
            </div>
          </div>
          <div class="swiper-slide">
<!-- 【middle】page_3 -->
            <div class="page_3 middles">
              <img class="imgs" src="https://placehold.jp/45/3da605/ffffff/411x76.png?text=3" width="411" />
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="swiper-pagination"></div>


<!--
*RIGHT
* -->
    <div class="right">
      <div class="swiper-container">
        <div class="swiper-wrapper">
<!-- 【right】page_1 -->
          <div class="swiper-slide">
            <div class="page_1 rights">
              <section class="attributes">
                <p class="title">title_11111</p>
                <p class="data">data_11111</p>
                <p class="data">data_11111</p>
              </section>
              <section class="umm">
                <p class="title">title_111111</p>
                <div class="data">
                  <img src="https://placehold.jp/0/a6a605/a6a605/193x202.png?text=_" width="193" />
                  <span class="data">data_111111</span>
                </div>
              </section>
            </div>
          </div>
<!-- /【right】page_1 -->
<!--【right】page_2 -->
          <div class="swiper-slide">
            <div class="page_2 rights">
              <section class="theme">
                <p class="title">title_222</p>
                <p class="data">data_222</p>
              </section>
            </div>
          </div>
<!-- /【right】page_2 -->
<!--【right】page_3 -->
          <div class="swiper-slide">
            <div class="page_3 rights">

            </div>
          </div>
<!-- /【right】page_3 -->
        </div>
      </div>
    </div>