从屏幕外远距离刷卡

Question

我用两张卡片盖了一把雨刷器。在移动设备上，视口中只有一张卡。第二张卡片在右边被截断。当我向左滑动时，第二张卡片会出现在视口中，而第一张卡片会在左侧被截断。

所有这些都很好。唯一不起作用的是第二张卡在视口中时右侧的距离。我在第二张卡上尝试了边距，在父元素上添加了空白。似乎没有任何作用。我希望卡片从视口的最右边出现。但是当它完全存在时，它应该与边缘保持一定距离，就像在左边一样。

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>