Html 边距不适用于x-scrollable灵活元素的最后一个子元素

我正在处理一个水平的可滚动容器，我需要最后一个子容器的右极限有一个空间，当它到达滚动结束时，我将最后一个子容器的右边距设置为70px，但当我完成滚动时，las-child的右极限将在容器的右极限处发生变化，完全忽略边距。利润是存在的，但它被忽略了

你可以在这支笔上看到它：

CSS

.container {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: scroll;
  overflow-y: visible;
  padding-bottom: 35px;
  padding-top: 35px;
  width: 100%;
  .card {
    width: 300px;
    height: 300px;
    border: 1px solid red;
    border-radius: 2px;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 15px 15px rgba(red, .3);
    margin-bottom: 20px;
    margin: 0 20px;
    flex: 0 0 auto;
    &:first-child {
      margin-left: 70px;
    }
    &:last-child {
      margin-right: 70px;
    }
  }
}

HTML

<div class="container">
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
</div>

---

经过一些研究，最好的解决方案是在末尾添加一个元素，该元素是您所需的填充/边距的伪元素。由于使用

flex

浏览器会忽略任何子元素右侧的

margin

或

padding

.container{
显示器：flex；
柔性包装：nowrap；
溢出-x：滚动；
填充：35px 70px；
}
.卡片{
最小宽度：300px；
高度：300px；
边框：1px纯红；
边界半径：2px；
显示：内联块；
盒影：0 15px 15px rgba（255,0,0,0.3）；
利润率：0.20px；
}
.卡片决赛{
右侧填充：70px；
}

---

我想这是因为利润率下降

解决此问题的一种方法是在CSS中的最后一张卡片上添加一个伪元素，如下所示：

[ ...CSS for card ...]
&:last-child {
  position: relative;
  &::after {
    position: absolute;
    content: '';
    right: -70px;
    width: 70px;
    height: 100%;
  }
}

---

因为这里的代码片段不能做SCS，所以我还将添加一个codepen链接：

元素上有边距。但似乎是这样的，因为您使用的是flex，所以它不包括容器中的边距。填充似乎也有同样的效果。我会摆弄你的密码笔，看看能不能帮你找到解决办法。