将 div 放置在边框旁边的其他 div 之上

Question

我正在尝试将一个 div 放在另一个 div 上，靠近父 div 的边框，请参阅 jsfiddle。我的问题是，当我在浏览器中放大/缩小时，边框和绿色 div 之间会出现间隙。关于如何解决这个问题的任何意见？

当前代码：

CSS：

#small_box
{
    height: 100%;
    width: 40px;
    z-index: 99;
    background-color: green;
}

#border_box
{
    width:200px;
    height:50px;
    background-color:red;
    border:5px solid black;
}

HTML：

<div id="border_box"><div id="small_box"></div></div>

Answer 1

您只需将display: flex; 应用于外部div。您可以从内部 div 中删除 z-index 和 height。

#small_box {
  width: 40px;
  background-color: green;
}

#border_box {
  width: 200px;
  height: 50px;
  background-color: red;
  border: 5px solid black;
  display: flex;
}

<div id="border_box">
  <div id="small_box"></div>
</div>