如何删除嵌套边框之间的空白？

Question

我尝试使用嵌套边框创建元素，如下图所示。但是这两个容器之间有一些空白，没有任何理由。

我可以在Chrome和Edge上重现此问题。

HTML                     

    </div>
  </div>
</div>

CSS

#container1 {
  width: 200px;
  height: 200px;
  border: 5px solid blue;
}

#container2 {
  width: 200px;
  height: 100%;
  border: 5px solid red;
  box-sizing: border-box;
}

#bar {
  background: orange;
  height: 24px;
  width: 100%;
}

https://jsfiddle.net/cjg9zf1o/9/

谢谢，