绝对宽度小于指定的 Div

Question

我正在尝试使用多个具有精确宽度的列，并且它们的高度在一定数量的元素之间平均分配。出于某种原因，尽管我在每列上指定了精确的 200px 宽度，但它们以某种方式获得了 162px 的计算宽度。

Chrome 开发工具显示一些奇怪的箭头，表明它由于某种原因从预期大小缩小了。我什至尝试从 div 中删除所有内容，以排除与孩子大小的一些奇怪的交互。

相关区域的 HTML 内容是这样的：

div {
  background: rgba(255, 0, 0, .1);
}

<div style="display: flex;">
  <div style="width: 200px; margin-right: 100px;">
    <div style="height: 50px;"></div>
    <div style="height: 50px;"></div>
    <div style="height: 50px;"></div>
    <div style="height: 50px;"></div>
    <div style="height: 50px;"></div>
    <div style="height: 50px;"></div>
    <div style="height: 50px;"></div>
    <div style="height: 50px;"></div>
  </div>
  <div style="width: 200px; margin-right: 100px;">
    <div style="height: 100px;"></div>
    <div style="height: 100px;"></div>
    <div style="height: 100px;"></div>
    <div style="height: 100px;"></div>
  </div>
  <div style="width: 200px; margin-right: 100px;">
    <div style="height: 200px;"></div>
    <div style="height: 200px;"></div>
  </div>
  <div style="width: 200px; margin-right: 100px;">
    <div style="height: 400px;"></div>
  </div>
</div>

包括一些突出显示的开发工具（显示我描述的箭头）它是这样呈现的（顶部的“圆形”标签不在上面的 HTML 内容中，而是正确的 200px + 100px 边距）：

我以前从未见过这样的东西，尤其是那些来自开发工具的箭头。是否有明显我遗漏的东西或我应该寻找的东西来诊断这个问题？

Answer 1

设置 display: flex 将子元素的大小转换到 flex 容器。如果您不想调整单个元素的大小，请设置 flex-grow: 0、flex-shrink: 0 和 flex-basis: 200px。您可以使用 flex 速记来完成所有三个操作：

flex: 0 0 200px;

.container {
  display: flex;
}

.container > * {
  flex: 0 0 200px;
  margin-right: 100px;
}

div {
  background: #cccccccc;
}

<div class="container">
  <div style="width: 200px; margin-right: 100px;">
    <div style="height: 50px;"></div>
    <div style="height: 50px;"></div>
    <div style="height: 50px;"></div>
    <div style="height: 50px;"></div>
    <div style="height: 50px;"></div>
    <div style="height: 50px;"></div>
    <div style="height: 50px;"></div>
    <div style="height: 50px;"></div>
  </div>
  <div style="width: 200px; margin-right: 100px;">
    <div style="height: 100px;"></div>
    <div style="height: 100px;"></div>
    <div style="height: 100px;"></div>
    <div style="height: 100px;"></div>
  </div>
  <div style="width: 200px; margin-right: 100px;">
    <div style="height: 200px;"></div>
    <div style="height: 200px;"></div>
  </div>
  <div style="width: 200px; margin-right: 100px;">
    <div style="height: 400px;"></div>
  </div>
</div>

Answer 2

这是 Flexbox 的默认行为。如果你把所有的宽度加起来，那么 200 宽度 + 100 边距，你会得到 300 * 4 = 1200 像素。如果您的视口小于 1200 像素，那么浏览器将尝试计算它可以沿主轴适合所有 div 的最佳宽度。因此你得到 162 + 100 * 4 只差 1200。尝试将你的视口或浏览器屏幕调整到比这更大，你应该得到预期的行为。

您看到的箭头是 Chrome 开发工具，它告诉您原始宽度已缩小以适合所有内容。