Смахивание карт с экрана с расстояния

Question

Я построил swiper с двумя картами в нем. На мобильных устройствах только одна карта находится в окне просмотра. Вторая карта обрезана справа. Когда я провожу пальцем влево, вторая карта появляется в окне просмотра, а первая усекается слева.

Все это просто отлично работает. Единственное, что не работает - это расстояние справа, когда вторая карта находится в окне просмотра. Я попробовал поле для второй карты, отступ для родительского элемента. Ничто не похоже на работу. Я хочу, чтобы карта появлялась с самого правого края окна просмотра. Но когда он полностью там, он должен иметь расстояние до края, как слева.

body {
  margin: 0;
  border: 1px solid gray;
}

.carousel {
  display: flex;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  padding: 1rem;
  max-width: 100vw;
}
.carousel .wahl-box {
  background-color: #5a3982;
  border-radius: 2px;
  transition: transform .3s, box-shadow .3s, width .3s, flex-basis .3s;
  scroll-snap-align: center;
  min-width: calc(100vw - 6rem);
  margin: 1rem .5rem;
  display: block;
}
.carousel .wahl-box.active {
  box-shadow: 0 1px 16px 0 rgba(76, 137, 130, 0.62);
  transform: scale(1.1, 1.1);
  margin: 1rem;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<form action="" class="carousel">
  <label class="d-block p-4 wahl-box text-white text-center " for="wahl_rente">
    <h2>Card 1</h2>
    <input class="d-none" type="radio" name="leistungswahl" id="wahl_rente" value="RENTE">
  </label>
  <label class="d-block p-4 wahl-box text-white text-center " for="wahl_kapital">
    <h2>Card 2</h2>
    <input class="d-none" type="radio" name="leistungswahl" id="wahl_kapital" value="KAPITAL">
  </label>
</form>

Answer 1

Так что это один из тех странных моментов, с которыми я сталкивался в прошлом, когда то, что кажется простым исправлением, может работать в одном браузере, но не в других. Это не box-sizing вещь, и она связана с переполнением так, как я не нашел «чистого» решения, поэтому я добавляю хак, пока не появится рок-звезда, как, например, наш друг @TemaniAfif, и научит нас обоих что-то удобное и более семантически элегантное, но это работает, ура!

body {
  margin: 0;
  border: 1px solid gray;
}

.carousel {
  display: flex;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  padding: 1rem;
  max-width: 100vw;
}
.carousel .wahl-box {
  background-color: #5a3982;
  border-radius: 2px;
  transition: transform .3s, box-shadow .3s, width .3s, flex-basis .3s;
  scroll-snap-align: center;
  min-width: calc(100vw - 6rem);
  margin: 1rem .5rem;
  display: block;
  position: relative;
}

.wahl-box:last-of-type:after {
  content: '';
  display: block;
  position: absolute;
  right: -1.5rem;
  top: 0;
  width: 1.5rem;
  height: 100%;
}  

.carousel .wahl-box.active {
  box-shadow: 0 1px 16px 0 rgba(76, 137, 130, 0.62);
  transform: scale(1.1, 1.1);
  margin: 1rem;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<form action="" class="carousel">
  <label class="d-block p-4 wahl-box text-white text-center " for="wahl_rente">
    <h2>Card 1</h2>
    <input class="d-none" type="radio" name="leistungswahl" id="wahl_rente" value="RENTE">
  </label>
  <label class="d-block p-4 wahl-box text-white text-center " for="wahl_kapital">
    <h2>Card 2</h2>
    <input class="d-none" type="radio" name="leistungswahl" id="wahl_kapital" value="KAPITAL">
  </label>
</form>