Marginal bottom does not work in flexbox

Question

I have a problem when I have flexbox, but I don’t want each individual element to be at a distance according to the given properties, so I want to play with fields.

I have a title at the top of the window, but I want the distance between it and the rest of the elements.

So, I want the list of elements to pbe grouped, but farther from the header.

However, when I do margin-bottom, it has no effect (when I increase or decrease margin-bottom, nothing changes).

I initially did this as a percentage and changed it to pixels, but this is also not a problem.

In this snippet, I will not have problems with how it looks, but in a larger browser there is almost no space between the title and the elements p, which is the problem.

.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>

Run codeHide result

Answer 1

Remove the declaration heightfrom the flex element (also a nested flex container):

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

This overrides the default value align-items: stretchin the container, which, of course, will give the element its full height.

height: 100%, , . height: auto ( ), height . , <p> . . Flex .

, <p> , flex auto.

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

margin-top: auto <p>, .

.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>

Hide result

jsFiddle