使用Flexbox出现意外的空白空间

Question

在问题仍然存在的情况下，我已将问题降至最低。

我不知道橙色空间的来源。

线索：删除一张图像，橙色空间消失了。...

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

某种程度上是个错误，但这是我对行为的解释：

让我们删除一些属性并遵循代码。

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

此代码似乎没问题。我们有一个具有行方向和一个div作为flex项目的flex容器。默认情况下，此div将适合其内容宽度。 innerItem也是如此。现在，通过添加低于100％的flex-basis，这两个图像将不适合容器的宽度，并且我们将换行，因此所有元素的高度都会增加（包括橙色框）。

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

现在，如果我们切换到列方向，则将保持相同的高度。就像浏览器根据行方向计算高度并将结果保留为列方向一样。

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

还有一个事实，即默认对齐方式是strech，因此，如果将对齐方式更改为其他方式，我们将返回到之前的状态：

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

---

对于一张图片，您不会遇到问题，因为从逻辑上讲，没有办法像多个图片一样进行换行。

Answer 2

我假设这些图片在.InnerItem中时应该包裹起来。在玩弄了一些小提琴之后，由于.OutterContainer，display: flex似乎正在扩展（并显示橙色空间）。我认为这是多余的，因为您已经在display: flex中指定了.InnerContainer。我删除了此CSS规则，并且可以通过将多张图片粘贴到.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 3

我在React Material-UI库中有类似的问题。这段代码中TableContainer下方有巨大的空白空间：

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

   //here I got huge empty unexpected space

</Grid>

然后我在container中添加Grid关键字，空白消失了。

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