子元素设置overflow:hidden ，导致父元素被异常撑开？

Question

如图，修改el-tabs样式，给.el-tabs__item 添加以下2个属性，会导致父元素高度被撑开
width: 50px;
overflow: hidden;

子元素只有40px，为什么父元素会有44px

Answer 1

父级容器 .el-tabs__nav 下面有空白节点导致的。
给父级节点 .el-tabs__nav 添加一个 font-size:0 或者 line-height:0 就可以解决问题了。

---

如果你要说为什么给 .el-tabs__item 元素添加了 overflow:hidden 就会出现这样的情况，和 BFC 相关的东西很难说清楚。
可能会有其他大佬能解释明白吧，我的话不会考虑太多，单纯只是知道怎么解决。

Answer 2

可能是空白节点影响。
给父级设置display: flex应该可以解决

Answer 3

根据你的描述不难发现，你其实改的是width 宽度，和height 高度没有关系。但是你的问题却出在了高度上，通过图片不难发现，你的这个tab块内容是溢出的状态，这种情况下你要考虑到怪异盒子模型了box-sizing: border-box;，而不是超出隐藏overflow: hidden

.el-tabs_item{
   width: 50px ;
   box-sizing: border-box;
}