margin left doesn't work on display flex but works on inner child how?

Question

child1: side content, child2: display flex.

I need child2 to move left by 150px.

If I set margin-left on child2 it doesn't work.

But if I set margin-left on child of child2 it works.

.side {
  width: 200px;
  float: left;
  position: relative;
}
.table-wrap {
  margin-left: -150px; /* doesn't work */
}
.table {
  margin-left: -150px; /* doesn't work */
  display: flex;
}
.item {
  margin-left: -150px; /* works oyea */
}
.stuff {
  width: 100px;
  height: 100px;
  background: green
}

<div class="content">
  <div class="side">
    side content
  </div>
  <div class="table-wrap">
    <div class="table">
      <div class="item"></div>
      <div class="stuff"></div>
    </div>
  </div>
</div>

Why? pen: http://codepen.io/anon/pen/JGwVpP

score 2 · Answer 1 · answered Mar 27 '16 at 19:45

That's because the float is out-of-flow, so it overlaps .table-wrap. But it reduces the length of line boxes inside it.

Then it seems the margin is ignored, but in fact it's not: .table-wrap is really moved to the left, but the contents aren't due to the float.

Instead, you should make .table-wrap establish a new block formatting context (BFC). Then it won't overlap the float.

For example, you can establish a BFC with overflow: hidden, display: inline-block or float: left. Here the former would be bad because it would hide the content overflowing due to the negative margin, so use one of the others.

.side {
  width: 200px;
  float: left;
  position: relative;
}
.table-wrap {
  display: inline-block; /* Establish Block Formatting Context */
  margin-left: -150px;   /* Now this works */
}
.table {
  display: flex;
}
.stuff {
  width: 100px;
  height: 100px;
  background: green
}

<div class="content">
  <div class="side">
    side content
  </div>
  <div class="table-wrap">
    <div class="table">
      <div class="item"></div>
      <div class="stuff"></div>
    </div>
  </div>
</div>

Alternatively, since you are already using flexbox, you can make .content be a flex container instead of floating .side

.content {
  display: flex;
}
.side {
  width: 200px;
  position: relative;
}
.table-wrap {
  margin-left: -150px; /* Now this works */
}
.table {
  display: flex;
}
.stuff {
  width: 100px;
  height: 100px;
  background: green
}

<div class="content">
  <div class="side">
    side content
  </div>
  <div class="table-wrap">
    <div class="table">
      <div class="item"></div>
      <div class="stuff"></div>
    </div>
  </div>
</div>

In [this answer](http://stackoverflow.com/a/32301823/1529630) I explained BFCs with more detail. — Oriol, Mar 27 '16 at 19:45

Vincent G · Accepted Answer · 2016-03-27T21:21:23.630

1

Try display: inline-block instead of display: flex; on .table element.

edited Mar 27 '16 at 21:21

answered Mar 27 '16 at 19:15

Vincent G

8,547
1
18
36

The cause is not the non-existence of collapsing margins in flexbox. The cause is the float. – Oriol Mar 27 '16 at 19:46
Right, I wasn't sure about this. After reading your answer, it's more clear to me, thanks ! – Vincent G Mar 27 '16 at 21:22

margin left doesn't work on display flex but works on inner child how?

2 Answers2