inline-flex和inline-block表现不同，导致的原因是？

Question

ts部分

import Skeleton from "react-loading-skeleton";

export default function Test2() {
  const styles: any = {
    width: 100,
    height: 80,
  };

  return (
    <div className="test2">
      <div className="item1">
        <Skeleton style={styles} />
      </div>
    </div>
  );
}

显示效果：

这里使用了inline-flex布局，外层元素没有设置宽高却达到了83px（内层元素设置的高度是80px），内层元素垂直方向的基线是偏向了bottom。

但是如果换成inline-block

还有第三方库，这个元素设置了line-height: 1，因为浏览器默认font-size: 16px，所以这里也有一点诡异，调整大于16px之后，会有一些变化。

注：
发现个有趣的事情，在chrome（Version 101.0.4951.54 (Official Build) (64-bit)
）下，默认行高等于Math.round(font-size * 1又1/3)

希望有css大神能分析下这个问题导致的原因，不胜感激！