swiper.js破坏了Flex布局

Question

问题

当浏览器的宽度或高度发生变化时，flex布局会损坏。
我试图修复它，但无法修复..
请帮我！

顺便说一下，我使用JS插件swiper。

---

代码

因为它不适用于代码段，所以我写了JSFiddle。
这样，即使1或11或111 ..是page_1的元素，它们最终仍包含在page_2中。 :(
（2或22或222 ..是page_2的元素。）

全屏小提琴为here。

▼这仅是代码。代码段无法正常工作。请查看JSFiddle。

model = Sequential()
model.add(LSTM(10, input_shape=(train_X.shape[1], train_X.shape[2])))
#model.add(Dropout(0.2))
#model.add(LSTM(30, input_shape=(train_X.shape[1], train_X.shape[2])))
model.add(Dense(1), return_sequences=True)
model.compile(loss=’mae’, optimizer=’adam’, metrics=[‘accuracy’])
# fit network
history = model.fit(train_X, train_y, epochs=50, batch_size=120, validation_data=(test_X, test_y), verbose=2, shuffle=False)
# plot history
pyplot.plot(history.history[‘loss’], label=’train’)
pyplot.plot(history.history[‘val_loss’], label=’test’)
pyplot.legend()
pyplot.show()
print(history.history[‘acc’])

/*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%;
  }
}