CSS problem: Gap between background-color (height: 100%) and border

I am trying to make an experience bar with 2 <div> area. the longer <div> outside for the frame and the shorter inside for the current experience.

when I use {height: 100%} for inside <div> to fill up space, there is a gap between border and background-color when I change the display size of the browser to some certain %.

I tried it in chrome and edge browser and they have the same problem. I can fix the gap by changing {height: 101%}. I just wonder why there's a gap for 100% in some certain display sizes.

* {
  box-sizing: border-box;
}

#bar-frame {
  background-color: grey;
  border: solid 13px black;
  height: 70px;
  width: 300px;
  border-radius: 5px;
}

#bar {
  background-color: black;
  height: 100%;
  width: 20%;
}

<body>
  <div id="bar-frame">
    <div id="bar"></div>
  </div>
</body>

I expect there's no gap in the bar, but there's a gap show up in some certain display sizes.

CODEPEN link: https://codepen.io/ququ929/pen/zQWrZQ

English is my second language, hope you can understand the problem, thank you.

picture to show the problem

picture 2

what I expect for all display size.

Solution

Add border: 1px solid grey in you #bar CSS will resolve your issue. Thanks

#bar {
  background-color: black;
  border: 1px solid grey;
  height: 100%; width: 20%;
}