Как предотвратить переполнение гибкого элемента из-за его текста? [дубликат]

На этот вопрос уже есть ответ здесь:

Почему гибкие элементы не уменьшаются за размер содержимого? (1 ответ)

Закрыто 2 года назад .

Я имею в виду следующий макет для списка. Каждый элемент списка представлен двумя столбцами. Второй столбец должен занимать все доступное пространство, но он должен быть закреплен справа с минимальным размером, если первый столбец занимает слишком много места. В первом столбце должно появиться многоточие.

Проблема возникает в последнем случае. Когда первый столбец состоит из слишком большого количества текста, вместо многоточия он вытягивается за пределы флексбокса, вызывая появление горизонтальной полосы прокрутки, а второй столбец не привязан к правому краю.

Я бы хотел, чтобы это выглядело так: (мокап):

Expected rendering

Как я могу этого добиться?

Это образец скрипки .

.container {
    display: -webkit-flex;
}

div {
    white-space: nowrap;
    text-overflow: ellipsis;
}

.container > div:last-child {
    -webkit-flex: 1;
    background: red;
}



    foo barfoo bar
    foo bar




    foo barfoo barfoo barfoo barfoo barfoo barfoo bar
    foo barfoo barfoo barfoo barfoo barfoo barfoo bar
    foo barfoo barfoo barfoo barfoo barfoo barfoo bar
    foo bar

задан user 5 March 2017 в 12:31

0 ответов

Другие вопросы по тегам:

css css3 flexbox google-chrome

Как предотвратить переполнение гибкого элемента из-за его текста? [дубликат]

0 ответов

Похожие вопросы: