Adding margin to first and last element of a Horizontally scrollling container

Question

I am trying to create a horizontal scrolling container. Every thing is working fine but i can't seem to be able to induce the margin on last element of the container,

Here's the pen,

https://codepen.io/mercurial_providence/pen/ZEEeGqR

<div class="container">
  <div class="content full-width">
    <div class="item">ITEM</div>
     ...
    <div class="item">ITEM</div>

  </div>
</div>

And the CSS,

.container{
  width:80%;
  margin-left:9%;
  background:blue;
  height:200px;
  position:absolute;
  .content{
    display:flex;
    flex-direction:row;
    overflow:auto;
  }
  .full-width {
      left: 50%;
      margin-left: -50vw;
      margin-right: -50vw;
      max-width: 100vw;
      position: relative;
      right: 50%;
      width: 100vw;
      > :first-child{
        margin-left: 5vw;
      }
      > :last-child{
        margin-right: 300vw;
      }
    }
}

.item{
  min-height:92px;
  min-width:92px;
  background:cyan;
  margin:4px;
}

score 0 · Answer 1 · answered Oct 23 '19 at 08:47

you can use this code

body {
  margin: 0px;
}

.container {
  width: 80%;
  margin-left: 9%;
  background: blue;
  height: 200px;
  position: absolute;
}

.container .content {
  display: flex;
  flex-direction: row;
  overflow: auto;
}

.container .full-width {
  left: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  max-width: 100vw;
  position: relative;
  right: 50%;
  width: 100vw;
}

.item:first-child {
  margin-left: 7vw;
}

.item:last-child {
  margin-right: 300vw;
}

.item {
  min-height: 92px;
  min-width: 92px;
  background: cyan;
  margin: 4px;
  padding: 5px;
}

<div class="container">
  <div class="content full-width">
    <div class="item">ITEM</div>
    <div class="item">ITEM</div>
    <div class="item">ITEM</div>
    <div class="item">ITEM</div>
    <div class="item">ITEM</div>
    <div class="item">ITEM</div>
    <div class="item">ITEM</div>
    <div class="item">ITEM</div>
    <div class="item">ITEM</div>
    <div class="item">ITEM</div>
    <div class="item">ITEM</div>
    <div class="item">ITEM</div>
    <div class="item">ITEM</div>
    <div class="item">ITEM</div>
    <div class="item">ITEM</div>
    <div class="item">ITEM</div>
    <div class="item">ITEM</div>
    <div class="item">ITEM</div>
    <div class="item">ITEM</div>
    <div class="item">ITEM</div>
    <div class="item">ITEM</div>
    <div class="item">ITEM</div>
    <div class="item">ITEM</div>
    <div class="item">ITEM</div>
    <div class="item">ITEM</div>
    <div class="item">ITEM</div>
    <div class="item">ITEM</div>
  </div>
</div>

score 0 · Answer 2 · answered Oct 23 '19 at 10:30

Your margin is applied on last-child it's calculation issue. If you see in DOM than last-child have margin-right 300vw. It's not possible without jQuery you calculate each item width and put it on a parent element.

var cal_width = 0;
jQuery('.full-width .item').each(function($){
  var o_width = jQuery(this).outerWidth(true);
  cal_width = cal_width + o_width;
});
jQuery('.full-width').css('width', cal_width);

body{overflow-x: hidden;}
.container{
  width:80%;
  margin-left:9%;
  background:blue;
  height:200px;
  position:relative;
  }
  .content{
    display:flex;
    flex-direction:row;
  }
  .scroll{
    position: relative;
    margin: 0 -20%;
    padding: 0 20%;
    overflow: auto;
  }
  .full-width {
      position: relative;
      left: 50%;
      margin-left: -50vw;
      margin-right: -50vw;
      right: 50%;
      }
       .full-width > .item:first-child{
        margin-left: 5vw;
      }
        .full-width > .item:last-child{
        margin-right: 10vw;
      }
    


.item{
  min-height:92px;
  min-width:92px;
  background:cyan;
  margin:4px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="scroll">
  <div class="content full-width">
    <div class="item">ITEM</div>
    <div class="item">ITEM</div>
    <div class="item">ITEM</div>
    <div class="item">ITEM</div>
    <div class="item">ITEM</div>
    <div class="item">ITEM</div>
    <div class="item">ITEM</div>
    <div class="item">ITEM</div>
    <div class="item">ITEM</div>
    <div class="item">ITEM</div>
    <div class="item">ITEM</div>
    <div class="item">ITEM</div>
    <div class="item">ITEM</div>
    <div class="item">ITEM</div>
    <div class="item">ITEM</div>
    <div class="item">ITEM</div>
    <div class="item">ITEM</div>
    <div class="item">ITEM</div>
    <div class="item">ITEM</div>
    <div class="item">ITEM</div>
    <div class="item">ITEM</div>
    <div class="item">ITEM</div>
    <div class="item">ITEM</div>
    <div class="item">ITEM</div>
    <div class="item">ITEM</div>
    <div class="item">ITEM</div>
    <div class="item">ITEM</div>
    
  </div>
  </div>
</div>

Adding margin to first and last element of a Horizontally scrollling container

2 Answers2