margin not working on last child of x-scrollable flexible element

Question

im working on an horizontal scrollable container, and i need the last child to have a space from the right limit of the container when it reaches the end of the scrolling, i setted the margin right of the last child to 70px but when i finish scrolling, the right limit of the las child stucks at the right limit of the container, ignoring the margin completely. The margin IS THERE but it's ignored.

You can see it on this pen:

https://codepen.io/CarlosPisarello/pen/JQyOpB

CSS

.container {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: scroll;
  overflow-y: visible;
  padding-bottom: 35px;
  padding-top: 35px;
  width: 100%;
  .card {
    width: 300px;
    height: 300px;
    border: 1px solid red;
    border-radius: 2px;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 15px 15px rgba(red, .3);
    margin-bottom: 20px;
    margin: 0 20px;
    flex: 0 0 auto;
    &:first-child {
      margin-left: 70px;
    }
    &:last-child {
      margin-right: 70px;
    }
  }
}

HTML

<div class="container">
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
</div>

The margin is there on the element. But seems like that because you are using flex, it does not include the margin in the container. Padding seems to do the same. I'll play around with your code pen and see if I can help you find a solution. — Marius, Jun 25 '19 at 18:41
Anyone know why this only happens in Safari (on iOS). In Chrome the margin-right still seems to work for me. Hmm. — Simon_Weaver, May 20 '23 at 20:36

score 4 · Accepted Answer · answered Jun 25 '19 at 19:44

I guess that's due to collapsing margins.

One way to work around it is to add a pseudo element to the last card in CSS, like this:

[ ...CSS for card ...]
&:last-child {
  position: relative;
  &::after {
    position: absolute;
    content: '';
    right: -70px;
    width: 70px;
    height: 100%;
  }
}

Since the snippets here can't do SCSS, I'll also add a codepen link: https://codepen.io/anon/pen/NZvyVZ

score 2 · Answer 2 · answered Jun 25 '19 at 19:18

After some research, the best solution will be adding an element at the end that is a pseudo element for the padding/margin you require. Since using flex the browsers ignore any margin or padding to the right of any child element.

.container {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: scroll;
  padding: 35px 70px;
}
.card {
  min-width: 300px;
  height: 300px;
  border: 1px solid red;
  border-radius: 2px;
  display: inline-block;
  box-shadow: 0 15px 15px rgba(255, 0, 0, 0.3);
  margin: 0 20px;
}

.card-final {
  padding-right: 70px;
}

<div class="container">
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card-final"></div>
</div>

margin not working on last child of x-scrollable flexible element

2 Answers2