Margin-bottom not working in flexbox

Question

I have an issue where I have a flexbox, but I don't exactly want every single element to be spaced according to the properties given, so I want to play with margins.

I have a header at the top of the box but I want spacing between it and the rest of the elements.

So I want my list of p elements to be grouped together but spaced farther away from the heading.

However, when I do margin-bottom it isn't having an effect (when I increase or decrease margin-bottom nothing changes).

I was originally doing it in percents and changed it to pixels but that doesn't seem to be the issue either.

In the snippet I would have no problem with how it looks but on a bigger browser there's hardly any space between the heading and the p elements which is the issue.

.container {
  display: flex;
  position: relative;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
  min-height: 70vh;
  width: 70%;
  margin: 5% auto 8% auto;
  background-color: white;
}
.container p {
  margin-bottom: 2%;
}
.container h2 {
  color: orange;
  font-size: 34px;
}
.middle p:first-child {
  margin-top: 8%;
}
.bspace {
  margin-bottom: 50px;
}
.box h2 {
  color: orange;
  text-align: center;
}
.left {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: space-around;
  order: 1;
  width: 30%;
}
.middle {
  display: flex;
  flex-flow: column wrap;
  order: 2;
  width: 45%;
  height: 100%;
}

<div class="container">
  <div class="left">
    <img src="home.jpg" alt="Picture of kid">
    <img src="catering.jpg" alt="Picture of kid">
  </div>
  <div class="middle">
    <h2 class="bspace"> Some Text </h2>
    <p>Sample</p>
    <p>Sample</p>
    <p>Sample</p>
    <p>Sample</p>
  </div>
</div>

heading is taking margin in the snippet .. http://jmp.sh/G28JuUG .. what else the issue ? — rmarif, Sep 03 '16 at 16:13

score 13 · Accepted Answer · edited May 23 '17 at 12:18

Remove the height declaration from the flex item (also a nested flex container):

.middle {
    display: flex;
    flex-flow: column wrap;
    order: 2;
    width: 45%;
    /* height: 100%;  <-- REMOVE */
}

This is overriding the default align-items: stretch on the container, which will naturally give the element full height.

Because you're using height: 100% improperly, it's not working as you expect. It's computing to height: auto (content height) because you haven't specified a height on the parent. Hence, there was no space available for the <p> elements to move further away. Just get rid of it. Flex height is simpler and easier.

Then, to space the <p> elements away from the header, use a flex auto margin.

.bspace {
    margin-bottom: auto;  /* previous value `50px` in your code */
}

Alternatively, you could use margin-top: auto on the first <p>, which will have the same effect.

.container {
  display: flex;
  position: relative;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
  min-height: 70vh;
  width: 70%;
  margin: 5% auto 8% auto;
  background-color: lightyellow;
}
.container p {
  margin-bottom: 2%;
}
.container h2 {
  color: orange;
  font-size: 34px;
}
.middle p:first-child {
  margin-top: 8%;
}
.bspace {
  /* margin-bottom: 50px; */
  margin-bottom: auto;
  /* new */
}
.box h2 {
  color: orange;
  text-align: center;
}
.left {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: space-around;
  order: 1;
  width: 30%;
  border: 1px dashed red;
}
.middle {
  display: flex;
  flex-flow: column wrap;
  order: 2;
  width: 45%;
  /* height: 100%; */
  border: 1px dashed green;
}

<div class="container">
  <div class="left">
    <img src="home.jpg" alt="Picture of kid">
    <img src="catering.jpg" alt="Picture of kid">
  </div>
  <div class="middle">
    <h2 class="bspace"> Some Text </h2>
    <p>Sample</p>
    <p>Sample</p>
    <p>Sample</p>
    <p>Sample</p>
  </div>
</div>

jsFiddle

Thanks and I have a couple of questions. What did you mean the previous value of 50 pixels? How specifically is the margin-bottom: auto calced? Like do I still need to put 50 pixels? Also didn't I specify the height for the parent with min-height: 70vh or does it have to be height: 70vh? — Shinji-san, Sep 03 '16 at 16:56
In your code you have `.bspace { margin-bottom: 50px }`. I replaced the value with `auto`. If you still need `50px` (for any reason; it's not necessary), apply the auto margin to the first `p`, as described in my answer... Regarding your last question, it needs to be `height`. For more in-depth explanations see [**here**](http://stackoverflow.com/a/33856609/3597276) and [**here**](http://stackoverflow.com/q/33636796/3597276). — Michael Benjamin, Sep 03 '16 at 17:02
Thank you for those links. In the first link with the alignment with margin: auto, could you explain how the boxes that weren't aligned with margin: auto aligned right next to the ones that were? Like if you put all the boxes in source order(box 1 2 3 and 4), 2 and 3 are margin: auto, but how'd you get box 1 to be aligned to 2 and 4 aligned to 3, even though they're on seperate sides - example: 41-45 box. — Shinji-san, Sep 03 '16 at 18:01
Happy to explain, but it sounds like we're on to a new question. Consider a new post. — Michael Benjamin, Sep 03 '16 at 18:09
Well yes and no. I am a little confused still on how everything's calculated but we'll see with my next question. I got the spacing that I wanted but I want to freely adjust it. But thank you very much for checking. — Shinji-san, Sep 17 '16 at 21:09

Margin-bottom not working in flexbox

1 Answers1