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

I'm assuming these pictures are supposed to wrap while they are in the .InnerItem. After playing around with your fiddle for a bit, it seems the .OutterContainer was expanding (and showing that orange space) because of its display: flex. I think this is redudant as you already specfiy display: flex inside of your .InnerContainer. I removed this CSS rule and was able to achieve the same picture wrapping by pasting multiple pictures inside of the .InnerItem.

.OutterContainer {
  flex-wrap: wrap;

  flex-direction: column;

  background-color: orange;
}

.InnerContainer {
  display: flex;

  background-color: blue;
}

.InnerItem {
  flex-basis: 90%;

  background-color: purple;
}

<div class="OutterContainer">
    <div>
        <div class="InnerContainer">
            <div class="InnerItem">
                <img src="http://via.placeholder.com/100x100">
                <img src="http://via.placeholder.com/100x100">
            </div>
        </div>
    </div>
</div>

Answer 2

I had similar problem in React Material-UI library. I got huge empty space below the TableContainer in this code:

<Grid item>                    
    <TableContainer>
        <Table>
            <TableHead>
                <TableRow>
                    //some cells
                </TableRow>
            </TableHead>
            <TableBody>
                    //some rows
            </TableBody>
        </Table>
    </TableContainer>

   //here I got huge empty unexpected space

</Grid>

Then I add container keyword in Grid and empty space disappeared.

<Grid item container>                    
    <TableContainer>
        <Table>
            //the same code
        </Table>
    </TableContainer>
</Grid>

Answer 3

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;
}

<div class="OutterContainer">
  <div style="border:1px solid;">
    <div class="InnerContainer">
      <div class="InnerItem">
        <img src="http://via.placeholder.com/100x100">
        <img src="http://via.placeholder.com/100x100">
      </div>
    </div>
  </div>
</div>

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;
}

<div class="OutterContainer">
  <div style="border:1px solid;">
    <div class="InnerContainer">
      <div class="InnerItem">
        <img src="http://via.placeholder.com/100x100">
        <img src="http://via.placeholder.com/100x100">
      </div>
    </div>
  </div>
</div>

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;
}

<div class="OutterContainer">
  <div style="border:1px solid;">
    <div class="InnerContainer">
      <div class="InnerItem">
        <img src="http://via.placeholder.com/100x100">
        <img src="http://via.placeholder.com/100x100">
      </div>
    </div>
  </div>
</div>

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;
}

<div class="OutterContainer">
  <div style="border:1px solid;">
    <div class="InnerContainer">
      <div class="InnerItem">
        <img src="http://via.placeholder.com/100x100">
        <img src="http://via.placeholder.com/100x100">
      </div>
    </div>
  </div>
</div>

---

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