CSS Right Margin Does Not Work Inside a Div with Overflow Scroll

CSS Right Margin Does Not Work Inside a Div With Overflow Scroll

TL;DR:

Margins are for moving an element in from the wrapper, not expanding the wrapper outwards.

The long explanation:

This behavior is consistent with specifying a width in addition to a horizontal margin anywhere in the document. To break it down, consider the following snippet, where I specificity a wrapper without an overflow property, and the margin does not expand the wrapper element.

body {
    padding: 20px;
}
.outer {
    width: 400px;
    border: 1px solid black;
}
.inner {
    width: 400px;
    height: 40px;
    margin: 0 20px;
    background: grey;
}

<div class="outer">
    <div class="inner">
        
    </div>
</div>

overflow scroll hides margin on right side

Adding display: inline-block on #inner will display margins on both sides.

JS Bin

Cannot give margin right to last element in div with scroll?

The display:flex; on parent prevent margin to childs. To reach what you want, you can use transparent border:

    .tab:last-child {
        border-right: 30px solid transparent;
    }

CSS table right margin in scrollable div

You could reset the default display:table to inline-table.

table {
  display: inline-table;
}

div {    display: inline-block;    width: 100px;    height: 100px;    background: blue;    overflow: scroll;}table {    display: inline-table;    table-layout: fixed;    background: red;    margin-bottom: 20px;    margin-right: 20px;}td {    min-width: 150px;    max-width: 150px;}

<div>    <table>        <tr><td>a</td></tr>        <tr><td>b</td></tr>        <tr><td>c</td></tr>        <tr><td>d</td></tr>    </table></div>

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

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

CSS-only margin at the end of a horizontally scrolling flex-row container

Something like this?

.scroller {  white-space: nowrap;  overflow-x: scroll;  width: 300px;}
.item {  display: inline-block;  border: 1px solid red;  width: 100px;  height: 50px;  margin-right: 20px;}
.item:first-child {  margin-left: 20px;}

<div class="scroller">  <div class="item"></div>  <div class="item"></div>  <div class="item"></div>  <div class="item"></div>  <div class="item"></div></div>

---

Related Topics