Текст занимает оставшееся пространство только в том случае, когда оно завершается ⇐ CSS

[Anonymous]

У меня есть контейнер для Div с фиксированной шириной и двумя Div внутри с текстом и x значок. Я использую Flex, чтобы отобразить их встроенные, и я хочу, чтобы они выровнялись влево. Проблема в том, что, как только текст завершается, значок X выравнивается вправо, потому что текстовый Div пытается занять все доступное пространство. Как я могу предотвратить это поведение?

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

.container {
width: 100px;
}
.content {
display: flex;
justify-content: flex-start;
align-items: center;
gap: 0.5rem;
border: 1px solid black;
}
.text {
text-align: left;
}
.icon {

}
.short {
width: 50px;
}< /code>



Content

X




Another content

X

Подробнее здесь: https://stackoverflow.com/questions/796 ... n-it-wraps