对齐溢出内的项目：在容器内以全宽滚动

Question

所以这有点复杂...我有一个设置最大宽度的容器，在该容器内我有一个滑块，我希望它是全宽的，带有溢出-x：滚动，以便它滚动里面的内容是横向的。

我使用此处找到的代码 (https://css-tricks.com/full-width-containers-limited-width-parents/) 强制容器内的全宽滑块 div 拉伸到屏幕边缘。

但是，在初始加载时，我希望滑块内第一个项目的 LEFT SIDE 与容器的左侧对齐（但当用户滚动时仍滚动到边缘），然后当用户到达滑块中的最后一项，我希望该项继续滚动，直到它碰到容器的右侧。

我认为我需要在:first-child 和:last-child psuedo 上使用一些左右边距做一些聪明的事情，但我无法确定确保第一项正好从左边缘开始是什么容器，然后最后一个孩子总是在右边缘完成。 （在任何屏幕尺寸下）

到目前为止，我已经设置了一个小提琴：

https://jsfiddle.net/89bk1fyp/

.container {
  max-width:600px;
  margin:0 auto;
  position:relative;
  background-color:#dedede;
}

.full-width-slider {
    overflow-x: auto;
    display:flex;
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}
.one-item {
  min-width:300px;
  margin:20px 20px 20px 0;
  background-color:#000;
  color:#000;
}

<div class="container">
  <div class="full-width-slider">
    <div class="one-item">
      Lorem Ipsum
    </div>
    <div class="one-item">
      Lorem Ipsum
    </div>
    <div class="one-item">
      Lorem Ipsum
    </div>
    <div class="one-item">
      Lorem Ipsum
    </div>
    <div class="one-item">
      Lorem Ipsum
    </div>
    <div class="one-item">
      Lorem Ipsum
    </div>
  </div>
</div>

第一个黑框，我希望它在灰色容器的左边缘开始，但是当用户向右滚动时滚动到屏幕边缘......我想在右边缘结束的最后一个黑框灰色容器，但仍然是全宽。

可能是这样的：

.one-item:first-child {
  margin-left: Calc?
}
.one-item:last-child {
  margin-right: Calc?
}

希望那是有道理的！？

Answer 1

这是一种简单的计算方法。

您只需取屏幕的一半，然后移除灰色部分的一半 (600px / 2)。

有时，当屏幕低于容器宽度（低于 600 像素）时，您必须使用媒体查询来调整计算。

.one-item:first-child{
      margin-left: calc(50vw - 300px);
}
.one-item:last-child{
      margin-right: calc(50vw - 300px);
}
@media screen and (max-width: 600px){
  .one-item:first-child{
      margin-left: calc((50vw - 50%) + 9px);
  }
  .one-item:last-child{
      margin-right: calc((50vw - 50%) + 9px);
  }
}

演示

.container {
  max-width:600px;
  margin:0 auto;
  position:relative;
  background-color:#dedede;
}

.full-width-slider {
    overflow-x: auto;
    display:flex;
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}
.one-item {
  min-width:300px;
  margin:20px 20px 20px 0;
  background-color:#000;
  color:#000;
}

.one-item:first-child{
      margin-left: calc(50vw - 300px);
}
.one-item:last-child{
      margin-right: calc(50vw - 300px);
}
@media screen and (max-width: 600px){
  .one-item:first-child{
      margin-left: calc((50vw - 50%) + 9px);
  }
  .one-item:last-child{
      margin-right: calc((50vw - 50%) + 9px);
  }
}

<div class="container">
  <div class="full-width-slider">
    <div class="one-item">
      Lorem Ipsum
    </div>
    <div class="one-item">
      Lorem Ipsum
    </div>
    <div class="one-item">
      Lorem Ipsum
    </div>
    <div class="one-item">
      Lorem Ipsum
    </div>
    <div class="one-item">
      Lorem Ipsum
    </div>
    <div class="one-item">
      Lorem Ipsum
    </div>
  </div>
</div>

Answer 2

您几乎可以根据这里使用的公式，https://css-tricks.com/full-width-containers-limited-width-parents/#with-known-non-parent-width

它需要取反值，因为它用于使用负边距将全宽元素拖到两侧 - 你想要相反的情况，你希望第一个和最后一个滑块项目远离外部该值的边缘。

.one-item:first-child {
  margin-left: calc(-.5 * (-100vw + 600px));
}
.one-item:last-child {
  margin-right: calc(-.5 * (-100vw + 600px));
}

https://jsfiddle.net/jkt13h4n/