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

【问题标题】：How to remove extra space on right side of an inline childs container?如何删除内联子容器右侧的额外空间？
【发布时间】：2021-04-26 18:59:57
【问题描述】：

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

.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 标记只是为了证明这一点，但我也可以使用任何css 属性，如flex 或float 来实现这一点。}

【问题讨论】：

剩余空间不足以容纳元素..
是的，我已经尝试过 flex 和其他解决方案，但它们对我不起作用，我将子宽度设置为 100px 以进行演示，但一些子元素也包含图像和其他内容，所以不是可以给他们百分比宽度。
@NenadVracar 子元素的宽度不一样，有些也可以有固定宽度，我也不是在寻找将所有子 div 保持在一行中的解决方案。
在 CSS 中，当子项换行时，父容器不会重新计算其宽度以收缩换行较少的列。有关更多详细信息和可能的解决方法（使用纯 CSS 和 inline-block），请参阅我的答案。 stackoverflow.com/a/32811002/3597276
没有简单的解决方案...这是行框的工作方式...这是一个常见的请求。

标签： html css

【解决方案1】：

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

再次阅读帖子后，我不确定您是否特别想使用display: inline-block。对不起！

【讨论】：

这如何解决问题？您只是禁用了包装。
如果恢复换行，问题依旧：jsfiddle.net/qxsb5fo9/3
是的，我明白了。发帖前没看清楚，不好意思！这是一个有趣的问题，仍在尝试一些事情:) Sass 没有解决方案吗？
欢迎您使用您可能拥有的任何解决方案修改您的答案。只需注意问题中的要求。我不确定 Sass 是否可以接受。