Align items inside an overflow:scroll with full width inside a container-CodePudding

So this is a little complicated... I have a container that sets a max-width, and inside that container I have a slider that I want to be full width, with overflow-x:scroll, so that it scrolls the content inside it horizontally.

I use the code found here (https://css-tricks.com/full-width-containers-limited-width-parents/) to force the full width slider div inside the container to stretch to the screen edge.

However, on initial load, I want the LEFT SIDE of the first item inside the slider to align with the left of the container (but still scroll to the edge when the user scrolls), and then when the user gets to the last item in the slider, I want this item to continue to scroll until it hits the RIGHT SIDE of the container.

I think I need to do something clever with some left/right margins on the :first-child and :last-child psuedo, but I can't work out what it is to make sure the first item starts exactly at the left edge of the container, and then the last child always finishes exactly at the right edge. (at any screen size)

I've setup a fiddle with what I have so far:

https://jsfiddle.net/89bk1fyp/

Show code snippet

.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>

The first black box, I want it to START on the left edge of the grey container, but scroll to the screen edge when the user scrolls right... and the last black box I want to END on the right edge of the grey container, but still be full width.

Maybe something like:

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

Hope that kind of makes sense!?

CodePudding user response：

You can pretty much base this on the formula used here, https://css-tricks.com/full-width-containers-limited-width-parents/#with-known-non-parent-width

It needs negating of the value, because there this is used to drag the full-width element out to both sides using negative margins - you want the opposite here, you want the first and last slider item to stay away from the outer edges by that value.

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

https://jsfiddle.net/jkt13h4n/

CodePudding user response：

Here a way to calcul simple.

You simply take the half of the screen and then remove the half of your grey part (600px / 2).

At a point, you must use media query to adjust calcul when the screen are below container width (under 600px).

.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);
  }
}

DEMO

.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>