远距离刷卡离屏

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>