Как всегда обрезать последний элемент flexbox в контейнере flexbox, поскольку ширина контейнера продолжает уменьшаться? ⇐ Html

[Anonymous]

У меня есть случай, когда в контейнере flex-box есть несколько гибких элементов. Поскольку ширина контейнера уменьшается, я хочу, чтобы левый элемент не обрезался, а правый элемент продолжал обрезаться до тех пор, пока не будет достаточно места для обоих элементов. Правый элемент должен исчезнуть, если для него не осталось места. Чтобы понять поведение, посмотрите изображения ниже:




Мне удалось добиться вышеуказанного поведение при использовании flex-shrink: 0 на левом элементе. Но проблема возникает, когда я пытаюсь еще больше уменьшить ширину контейнера и не могу добиться усечения левого элемента с помощью свойств overflow и text-overflow. Элемент переполняет контейнер из-за свойства flex-shrink: 0, которое необходимо для достижения описанного выше поведения, когда оба элемента видимы. Как я могу обрезать левый элемент, сохраняя при этом вышеуказанное поведение? Ответ, который может решить эту проблему для любого количества гибких элементов, был бы отличным, я также ценю ответ, который может решить эту проблему всего для 2 элементов.

Вот мой код:

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

.flex-parent {
width: 400px;
display: flex;
flex-wrap: nowrap;
border: 1px solid red;
padding: 10px;
margin: 10px;
}

.child {
margin: 0 10px;
min-width: 0;
}

.no-ellipsis {
flex-shrink: 0;
}

.ellipsis p {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

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

This is "fixed", don't truncate it!

Lorem ipsum dolor sit amet, consectetur

Подробнее здесь: https://stackoverflow.com/questions/793 ... e-width-of