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 i.e 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;
}

Margin = outer frame, padding = inner frame. If you want the 20th element to have more space to the right *in the container*, then all you need to do is add the CSS property `padding-right:` and your desired value to the element. — Martin, Jun 23 '20 at 16:02
I've tried :last-element { padding-right: 50px; }. but it didn't work. — DecPK, Jun 23 '20 at 16:03
Does your container `
` element by any chance have a fixed pixel width? Your content seem to overflow your container `
` element. — Martin, Jun 23 '20 at 16:05
Somehow your container is not flex, but the contents are, so they are not following flex container pattern, which makes them ignore their container as they behave totally independently as flex items. If that makes sense. — Martin, Jun 23 '20 at 16:11
@Martin could you please elaborate. I mean how can we code to do this work. — DecPK, Jun 23 '20 at 16:14
To be honest, I'm no Vue guru, I don't really use that framework at all. So I'm not sure how I would go about doing it in that environment. However, using normal Felxbox Grid or Bootstrap Grid, this becomes very simple. All I can say is that you do not have a flex container currently. Your items (i.e. the row of divs) is the only thing that's flex. That's why they don't behave as if there is a flex container but rather just do their own thing. — Martin, Jun 23 '20 at 16:21

Théo Benoit · Answer 1 · 2020-06-24T08:25:45.303

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/

edited Jun 24 '20 at 08:25

answered Jun 23 '20 at 16:05

Théo Benoit

567
1
4
14

didn't work: [link](https://jsfiddle.net/kumarmasterpraveen/rpkyxnfh/12/) – DecPK Jun 23 '20 at 16:11

score 0 · Answer 2 · answered Jun 23 '20 at 16:13

0

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

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

answered Jun 23 '20 at 16:13

Jovan Novakovic

146
2
3
8

1

didn't work tried [here](https://jsfiddle.net/kumarmasterpraveen/rpkyxnfh/17/) – DecPK Jun 23 '20 at 16:16
You can take look at this thread: https://stackoverflow.com/questions/38993170/last-margin-padding-collapsing-in-flexbox-grid-layout Something to do with last-child and border-right. Use border-right on the last element – Jovan Novakovic Jun 23 '20 at 16:38

score -1 · Answer 3 · answered Jun 23 '20 at 16:03

-1

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
}

answered Jun 23 '20 at 16:03

Hazique Quazi

11

score -1 · Answer 4 · answered Jun 23 '20 at 16:04

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.

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

4 Answers4