Estou tentando replicar o comportamento que você tem em uma aba do Chrome no Windows.
A largura mínima da aba é definida como a largura do botão Fechar e cortará qualquer texto conforme a aba encolhe, garantindo que sempre haja um espaço entre qualquer texto visível e o botão Fechar.
Foi aqui que cheguei:
https://jsfiddle.net/f7tc34q6/9/
#parent {
background: grey;
display: flex;
height: 50px;
}
#item {
align-items: center;
display: flex;
background: blue;
min-width: fit-contents;
width: 40px;
}
span {
display: inline;
min-width: 0;
overflow: hidden;
word-break: nowrap;
padding-right: 5px;
}
button {
display: block;
width: 20px;
height: 20px;
}<div id="parent">
<div id="item">
<span>Text</span>
<button></button>
</div>
</div>Isso não chega nem perto. O min-width: min-contentnão se comporta, o texto não é recortado e não há espaço entre o texto e o botão de fechar.
