Как ограничить текст одной линией внутри сгибки с помощью Flex-Start, не устанавливая фиксированную ширину на родительск ⇐ CSS

[Anonymous]

Несмотря на предоставление переполнения: hidden < /code> Следующий код вызывает горизонтальную полосу прокрутки: < /p>

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

.container {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1rem;
}

.item {
background-color: orange;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}< /code>


short text

long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text

Мне нужны Align-items: flex-start on Контейнер, потому что я хочу, чтобы оранжевые элементы были такими же маленькими, как текст внутри, и не вырастал до всего доступного пространства. < /p>
Я не могу установить фиксированную ширину на контейнере, потому что я хочу, чтобы он заполнил свой контейнер.
Могу ли я предотвратить элемент с длинным текстом, вызывая горизонтальную полосу прокрутки?

Подробнее здесь: https://stackoverflow.com/questions/794 ... hout-setti