Html 当一个div有滚动条时，将边框对齐

HTML

这两个分线盒的接线板不匹配。 我不想同时给两个子框和滚动条。 我不想将20%更改为像素值

---

我怎样才能把边界排好？为什么会发生这种情况？

边框没有对齐，因为滚动条正在从

#box-1的宽度中减去
20%
的
500px
-
使框1的宽度稍小，因此将边框放置在几个像素上

如果您想要滚动，您将无法对宽度使用
%
。
尝试删除溢出：自动；从#box-1
中，滚动条由浏览器生成，根据我的经验，每个浏览器都以自己独特的方式绘制滚动条。。。唯一能让这个像素完美的方法就是删除浏览器生成的滚动条，并用插件中的自定义滚动条替换它们。。。（如果进行谷歌搜索，有几个选项）

一个例子：

通过这种方式，您可以专门为最佳跨浏览器体验调整div和滚动条的大小和位置
您是在问为什么会有滚动条吗？不，我想知道滚动条为什么会改变边框的位置，以及我如何修复它。谢谢您的具体说明！谢谢，我一定会试试的。我需要1号框来滚动。谢谢你的建议。
<div id="box-1">
  <div class="sub-box"></div>
  <div class="sub-box"></div>
  <div class="sub-box"></div>
  <div class="sub-box"></div>
  <div class="sub-box"></div>
</div>
<div id="box-2">
  <div class="sub-box"></div>
</div>

#box-1 {
  width: 500px;
  height: 100px;
  overflow: auto;
  background: black;
}
#box-2 {
  width: 500px;
  height: 100px;
  background: red;
}
.sub-box {
  width: 20%;
  height: 30px;
  border-right: 5px solid #FFF;
}