@
snarkprayer 谢谢大佬提供思路。不过好像不是 overflow:clip 的原因,设为 hidden 后行为还是一样的。我把这个问题的示例简化了一下在这里
https://jsfiddle.net/o3dgjf0s/6/,只需要关注 item 这个 div 中的元素就行了。
```
<div class="root">
<div class="container">
<div class="item">
<img class="icon" />
<!-- <div class="icon"></div> -->
<span>Hello World !!!</span>
</div>
</div>
</div>
* {
border: 0px;
box-sizing: border-box;
margin: 0px;
padding: 0px;
}
.root {
display: flex;
justify-content: center;
}
.item {
border: 1px solid black;
display: flex;
align-items: center;
white-space: nowrap;
}
.icon {
background: green;
width: 16px;
height: 16px;
max-width: 100%;
flex-shrink: 0;
overflow: hidden;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
padding: 10px;
width: 50px;
}
```