Why do scroll bars appear on Mac when line-height is greater than font-size?

Question

<div class="hd-col">
  <div class="box">
    <span class="i-b">11AGg</span>
    <span class="i-b">个靠</span>
  </div>
</div>

.hd-col{
  border: 1px solid #000;
  box-sizing: border-box;
}
.i-b{
  display: inline-block;
  font-size: 30px;
  line-height: 40px;
  background: red;
}
.box{
  overflow: auto;
}

On codepen: https://codepen.io/ZhongxuYang/pen/eYPvQOZ

I hope know why scroll bars appear on Mac and how to fix it.