How to add margin/padding i.e space right to the end of the last element if we have extremely long horizontal scrolling page?

Question

How to add some space to the right of last element ie in our case after 20th box of 100px*100px aligned right to each other. jsfiddle

html

<div class="container">
  <div class="element" v-for="element in 20" :key="element">{{ element }}</div>
</div>

css

.container {
  display: flex;
  flex-direction: row;
  padding-right: 50px;   // not working
  margin-right: 50px;    // not working
}

.element {
  margin: 16px;
  min-width: 100px;
  height: 100px;
  background-color: #ddd;
  border-radius: 10px;
}

Answer 1

I added a

display: inline-flex;

to.container and then it works

You can see it here: https://jsfiddle.net/q2f6710x/4/

And you can add a

overflow: auto;

to #app

to make it scrollable: https://jsfiddle.net/2uex398f/

Answer 2

Try to add to your container class also justify-content:center.

.container {
  display: flex;
  flex-direction: row;
  justify-content:center;
}

Answer 3

You can always add bootstrap to you're code through,

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>

Or at this website https://getbootstrap.com/docs/4.3/getting-started/download/

If you add bootstrap you can use classes such as

class="mr-1"

or

class="pr-1"

where 1 can be replaced by any number to increase padding or margin

you can also keep all prior styling.

Answer 4

Did you try marking those properties as important?

.container {
  display: flex;
  flex-direction: row;
  padding-right: 50px !important;   // not working
  margin-right: 50px !important;    // not working
}