Уменьшить минимальную ширину до минимального содержимого одного дочернего элемента, но уменьшить другой ⇐ CSS

[Anonymous]

Я пытаюсь воспроизвести поведение вкладки Chrome в Windows.
Минимальная ширина вкладки равна ширине кнопки закрытия, и она будет обрезана. любой текст при сжатии вкладки, поэтому между любым видимым текстом и кнопкой закрытия всегда остается зазор.
Вот к чему я добрался:
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;
}

Код: Выделить всё

Text

Это даже не близко. Минимальная ширина: min-content не работает, текст не обрезается, и между текстом и кнопкой закрытия нет зазора.

Подробнее здесь: https://stackoverflow.com/questions/792 ... -the-other