Solution 1 :

Here is little trick about the margin-right which wasn’t applied on the last div you can
easily add another div and make it small as possible for example like 0.1px but if it is 0px it won’t work this will make the last div left space between them but the last div will not be visible so it will sound like its margin has been applied

body {
  width: 100%;
  height: 40vh;
  margin: 0;
}

div {
  height: 100%;
}

.container {
  width: 100%;
}

.container>div {
  /*overflow-y: hidden;*/
  overflow-x: scroll;
  display: flex;
  width: 100%;
}

.container>div>div {
  min-width: 20%;
  display: inline-block;
  margin: 0 10px;
  background: red;
}

.container>div>div:last-child {
  min-width: 0.1px;
  height: 100%;
}
<div class="container">
  <div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

Solution 2 :

So, I think the issue is your min-width setting. 20% of 100 would only allow 5 blocks without spacing. 7 blocks would need to be ~14% + spacing to allow enough room. So you can take out the min-width, convert your margin spacing to something proportional and add flex:1 to .container > div > div. jsfiddle

Solution 3 :

Extending @Gad answer:
There is option to not add additional div at the end. You can just use pseudo element ::after/::before and then add something like this. Important note is fact that then div with after pseudo element needs to be position: relative.

.container>div>div:last-child::after {
  content: " ";
    width: 25px;
    height: 100%;
    position: absolute;
    right: -25px;
}

https://jsfiddle.net/0b4tm5y3/4/

Problem :

I have a flex container that is 100% width with a horizontal scroll. I want to have space on left and right in the scroll, but margin-right of the divs doesn’t create space on the right side, also I have another container wrapping the container to hide the scrollBar with padding-bottom.

I know that I can use white-space: nowrap in a block container in which margin-right works, but I want to use flex-box. Also I am setting the divs’ width with min-width:

Also I know that in this case min-width: 22% = 22vw, but I want to do it with percantage.
jsfiddle code open

body{
  width: 100%;
  height: 10vh;
  margin: 0;
}
div{
    height: 100%;
}
.container{
  width: 100%;
}
.container > div{
  overflow-y: hidden;
  display: flex;
  width: 100%;
}
.container > div > div{
  min-width: 20%;
  display: inline-block;
  margin: 0 5px;
  background: red;
}

Comments

Comment posted by kadash

I’m trying to understand: would you like to have space on the right and on the left inside the container?

Comment posted by ivaylo

@kadash When you open the jsfiddle you can see that there is white space before the first red div, but when you scroll the horizontal scroll there is no white space after the last red div.

Comment posted by ivaylo

I don’t think you have understood my question I want to have a scroll and I want my divs to be 20% of the view. The scroll is intended I don’t want to fit the divs in the body’s width the only thing I want is the scroll to have padding on left and right.

By

Leave a Reply

Your email address will not be published. Required fields are marked *