Flexbox 布局比浏览器更宽 [重复]答案

【问题标题】：Flexbox layout wider than browser [duplicate]Flexbox 布局比浏览器更宽 [重复]
【发布时间】：2020-06-26 23:58:15
【问题描述】：

预期输出：一条水平线，下面是“测试”一词，没有水平滚动条。

实际输出：水平线下方带有“testing”字样，但有一个水平滚动条，可用于大致移动5px，与浏览器宽度无关。

这是重现问题所需的最少代码：

body {
  margin: auto;
  display: flex;
  flex-direction: column;
}

hr {
  min-width: 100%;
}

<html>
<body>

<section>
  <hr>
  <span>
testing.
  </span>
</section>

</body>
</html>

正如您使用“run sn-p”所看到的，您可以向右滚动并将测试中的“t”部分移出页面。

问题：

为什么？如何制作仅使用浏览器宽度的 flexbox 布局？我认为添加 body { width: 100vw;} 会有所帮助，但它似乎并没有改变任何东西。
如何在不向 SO 寻求帮助的情况下调试此行为？如果我删除任何 CSS 行，问题就会消失，但我想要的格式也会消失，所以我不能说它们中的哪一个有问题。我怎么能自己找出问题所在？

【问题讨论】：

【解决方案1】：

首先：您的 flex 布局运行良好！问题在于<hr> 元素，它偷偷地占用了一些水平空间。它的两边都有边框——每个 1px。

这里有三种不同的解决方案，任你选择！

摆脱边界

hr {
  min-width: 100%;
  border-left: none;
  border-right: none;
}

从总宽度中减去边框宽度

hr {
  min-width: calc(100% - 2px);
}

更改元素的盒子大小

hr {
  box-sizing: border-box;
  min-width: 100%;
}

【讨论】：

实际上是总共加了2px的宽度，因为每边都会加满1px。所以你的第二个例子应该是min-width: calc(100% - 2px);，并将“- 0.5px each”更改为“- 1px each”。除此之外，你想出了和我一样的东西。
@chris 你是对的，已编辑！