6

I have a div with some sub divs that I use as tabs, and my parent div has horizontal scroll (i use this for mobile view so width is smaller). Something like this:

.parent {
  display: flex;
  overflow-x: auto;
  padding: 15px 0 20px;
}

.tab {
  font-size: 15px;
  text-transform: uppercase;
  padding: 10px 40px;
  color: #a4b5bf;
  white-space: nowrap;
}
<div class="parent">
  <div class="tab">Tab 1</div>
  <div class="tab">Tab 2</div>
  <div class="tab">Tab 3</div>
  <div class="tab">Tab 4</div>
</div>

The problem is, when I want to set up margin right on last element, it just wont move from the end of the div.. He gets the margin, you see it in the inspector but it just doesn't move.

G-Cyrillus
  • 101,410
  • 14
  • 105
  • 129
Nemanja G
  • 1,760
  • 6
  • 29
  • 48
  • There are css flex properties, try using them to fix. Something like "flex: 0 0 auto;" – Vinod Kumar Aug 08 '17 at 11:49
  • What do you mean? Because when i look in the inspector, there is no margin on the last element. Only padding, and that is on all the elements? – Dev Bunker Aug 08 '17 at 12:09
  • there is no margin now, I have a function in js that gives margin left/right to first and last element (I have to do it like that but it works), and it moves first from the left, but last one stays stuck on the right, even tho there is margin right. @DevBunker – Nemanja G Aug 08 '17 at 12:12
  • Maybe you should update the code in your question to reflect the resulting layout (after JS applied the additional rules), so that we can actually reproduce the issue. – domsson Aug 08 '17 at 12:15
  • @domsson it just gives margin-left and margin right based on screen size minus the width of the tab, its nothing weird – Nemanja G Aug 08 '17 at 12:24

2 Answers2

8

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;
    }
kastriotcunaku
  • 1,179
  • 7
  • 11
  • This would do the work but if I want to add some background to my tab, it just sees it as padding and my tab is just wider – Nemanja G Aug 08 '17 at 12:25
  • @grabnem - If you have solid background color to parents, you can overwrite it with border color, ex. border-right: 30px solid #ffff; // for white parent background. – kastriotcunaku Aug 08 '17 at 12:29
4

I know this is an old question but recently I had similar problems and my solution is to use ::before or ::after on the parent container depending if you want the first or last element (in this case) to have margin-right or padding-right.


    .parent::after {
      content: '';
      border-left: 20px solid transparent; 
    }

Codepen

.parent {
  display: flex;
  overflow-x: auto;
  padding: 15px 0 20px;
  /*extra code for example purpose*/
  background: aquamarine;
  width: 450px;
}

.tab {
  font-size: 15px;
  text-transform: uppercase;
  padding: 10px 40px;
  color: #a4b5bf;
  white-space: nowrap;
  /*extra code for example purpose*/
  background-color: teal;
}


/** 
Having the before and after pseudo element in parent to mimic adding margin/padding to the first and last child element 

NOTE: There's a possibility that sometimes border-left doesn't work and border works, which in this case, the border width should be half to accomodate the left and right border
**/

.parent::before,
.parent::after {
  content: '';
  border-left: 20px solid transparent;
}
<div class="parent">
  <div class="tab">Tab 1</div>
  <div class="tab">Tab 2</div>
  <div class="tab">Tab 3</div>
  <div class="tab">Tab 4</div>
</div>
Omar Tan
  • 187
  • 1
  • 12