如何删除内联子容器右侧的额外空间？

Question

我有一个包含一些内联子元素的父容器，而父容器具有动态宽度。它看起来很棒，直到所有子元素都在一行中，但是当你缩小浏览器窗口并且子元素转到下一行时，它会在父容器的右侧留下额外的空间。正如您可以在下面的图像中看到子容器边框之间的额外空间。

.container {
  display: inline-block;
  border: 5px solid #000;
  padding: 10px;
}

.child {
  display: inline-block;
  background-color: #F00;
  width: 100px;
  height: 100px;
  margin: 5px;
}

<div class="container">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

我想知道两件事：

1：为什么在内联子元素转到下一行后父容器的宽度不缩小？

2：有没有解决办法用CSS删除多余的空间？

_{请注意，我使用display: inline-block;标记.child只是为了证明这一点，但我也可以使用flex或float之类的任何css属性来实现这一点。}

Answer 1

您可以改用Google Documentation。将父容器的显示更改为display: flex和flexbox。

再次阅读该帖后，我不确定您是否特别想使用display: inline-block。抱歉，那个！