У меня есть следующий макет для списка. Каждый элемент списка представлен двумя столбцами. Второй столбец должен занимать все свободное пространство, но он должен быть привязан вправо с минимальным размером, если первый столбец занимает слишком много места. В первом столбце следует указать многоточие.
Проблема в последнем случае. Когда первый столбец состоит из слишком большого количества текста, вместо того, чтобы показывать многоточие, он растягивается из flexbox, вызывая появление горизонтальной полосы прокрутки, а второй столбец не привязан вправо.
Я хотел бы, чтобы это выглядело так (макет):
Как я могу это достичь?
Это образец скрипта.
.container {
display: -webkit-flex;
}
div {
white-space: nowrap;
text-overflow: ellipsis;
}
.container > div:last-child {
-webkit-flex: 1;
background: red;
}
<!-- a small first column; the second column is taking up space as expected -->
<div class="container">
<div>foo barfoo bar</div>
<div>foo bar</div>
</div>
<!-- a large first column; the first column is overflowing out of the flexbox container -->
<div class="container">
<div>foo barfoo barfoo barfoo barfoo barfoo barfoo bar
foo barfoo barfoo barfoo barfoo barfoo barfoo bar
foo barfoo barfoo barfoo barfoo barfoo barfoo bar</div>
<div>foo bar</div>
</div>