How to add negative margin to flexbox without scroll bar (not showing, and not being able to scroll, no hacks)

Question

TL;DR: codepen here make the items have at least 30px margin-right and no margin in case it is mobile view. Without using what I consider hacky media queries or jQuery. And no horizontal scroll

Why?

I want to use flexbox

following problem:

3 items

for desktop they align in a row. For mobile there is maybe 2, maybe 1. Each one having margin-right: 30px;

now, the last one (of the row, 1, 2 or 3 rows possible) must not have margin-right or at least look as if it does not have a margin. No hacks allowed right. This must be a responsive solution.

this is pretty standard imho:

e.g. desktop:

display 3 items, each with a minimum margin of 30px, or more depending on screen size. If there is less space, flex-wrap to the next line

on small mobiles:

only show one item per row, but centered without the margin-right: 30px

what did I try?

codepen here

HTML

<div class="row no-gutters my-outer">
  <div class="col-12 d-flex justify-content-between flex-wrap">  

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

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

</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>

CSS

.item{
  width: 400px;
  height: 400px;
  background-color: cornflowerblue;
  margin-right: 30px;
  margin-top: 30px;

}

.my-outer{
  margin-top: -30px;
  margin-right: -30px;
  xxxxwidth: calc(100% - 30px);
}

negative margin on the parent

the issue is, that it creates a scroll bar

there should be a standard solution for this, no?

using width: calc(100% - 30px); creates other odd issues that are unwanted.

when using overflow-x: hidden on the parent element, you get issues with this: overflow-x:hidden still can scroll

Answer 1

Since the built-in col-12 rule looks like this

.col-12 {
  flex: 0 0 100%;
  max-width: 100%;
}

it prevents it from being wider than 100%, which it needs to for the margins to work. So if to remove it, and as the col-12 element is a flex row item, it will need a width if no wrap occurs, or it won't fill the available space in its parent.

Then, when it comes to add margins like that, it is better to add it on the left side of the item, as left margin generally won't cause a scroll to appear, which right margin often does, and the compensation for that margin should be applied on the items parent, not the outer most element.

So in below samples I removed col-12, added a custom rule, my-inner, and used left margin.

---

Now, for the mobile layout, since there is no way to detect when the items wrap, you either need a media query or a script, and as media query is really not a hack, and there is only one property that needs to be altered, justify-content, this is the cleanest solution.

Updated codepen

Stack snippet

.item{
  width: 300px;
  height: 300px;
  background-color: cornflowerblue;
  margin-left: 30px;
  margin-top: 30px;
}

.my-inner {
  flex-grow: 1;
  margin-left: -30px;
  margin-top: -30px;
}

@media (max-width: 647px) {
  .my-inner {
    justify-content: space-around !important;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>

<div class="row no-gutters my-outer">
  <div class="d-flex flex-wrap justify-content-between my-inner">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</div>

---

My personal recommendation though, is to use space-around, which IMHO align the items much nicer w/o a big gap between items, and with making use of one of the pseudo elements one can keep the 3rd item left aligned.

Updated codepen 2

Stack snippet 2

.my-inner::after,
.item{
  width: 300px;
  height: 300px;
  background-color: cornflowerblue;
  margin-left: 30px;
  margin-top: 30px;
}

.my-inner::after {
  content: '';
  height: 0;
}

.my-inner {
  flex-grow: 1;
  margin-left: -30px;
  margin-top: -30px;
}

@media (min-width: 960px) {
  .my-inner::after {
    display: none;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>

<div class="row no-gutters my-outer">
  <div class="d-flex flex-wrap justify-content-around my-inner">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</div>

---

Thanks to Toskan, here is the final version they made out of my above sample.

Answer 2

Try this at the bottom of your style sheet.

1. Use @media to target the device by width.
2. Use max-width and % width for responsive views

3. Use last-child to make sure there is no margin on the last item as oppose to using negative margins

   @media (min-width:800px) { .item { width: 100%; max-width: 400px; }

   .item:last-child { margin-right: 0; }

   .row { max-width: 100%; } }

   @media (max-width:800px) { .item { width: 100%; max-width: 400px; margin: 0 auto; }

   .item:last-child { margin-right: 30px; }

   .row { max-width: 100%; } }