Unexpected empty space using flexbox

Question

I\'ve reduced the problem to the minimum possible where the issue is still present.

I don\'t understand where the orange space is coming from.

Answer 1

It's somehow a bug but here is my explanation of the behavior:

Let's remove some properties and follow the code.

.OutterContainer {
  display: flex;
  flex-wrap: wrap;
  /*flex-direction: column;*/
  background-color: orange;
}

.InnerContainer {
  display: flex;
  background-color: blue;
}

.InnerItem {
  /*flex-basis: 90%;*/
  background-color: purple;
}

This code seems ok. We have a flex container with a row direction and a div as a flex item. This div will by default fit its content width. Same thing for the innerItem. Now by adding a flex-basis lower than 100% both images won't fit the container width and we will have a line break thus the height of all the elements will increase (including the orange box).

.OutterContainer {
  display: flex;
  flex-wrap: wrap;
  /*flex-direction: column;*/
  background-color: orange;
}

.InnerContainer {
  display: flex;
  background-color: blue;
}

.InnerItem {
  flex-basis: 90%;
  background-color: purple;
}

Now if we switch to a column direction the same height is kept. It's like the browser did the calculation of the height based on the row direction and kept the result for the column direction.

.OutterContainer {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  background-color: orange;
}

.InnerContainer {
  display: flex;
  background-color: blue;
}

.InnerItem {
  flex-basis: 90%;
  background-color: purple;
}

There is also the fact that the default alignment is strech so if you change the alignment to something else we will get back to the previous state:

.OutterContainer {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items:flex-start;
  background-color: orange;
}

.InnerContainer {
  display: flex;
  background-color: blue;
}

.InnerItem {
  flex-basis: 90%;
  background-color: purple;
}

---

With one image you cannot have the issue because logically there is no way to have a line break like with more than one.