Как сделать чтобы не переполнялся flex контейнер и к тексу добавлялся truncate ("...")?

Question

[Кирилл]

https://codepen.io/Lirrr/pen/yLzzxQW



Мне нужно чтобы желтый и розовый блоки не переполняли зеленый, а также желтый блок скрывал лишний текст за “…”. Мне казалось что все стили для этого я прописал, но не работает. Возможно из-за неопределенной ширины блока с текстом, но я не хочу ее определять конкретным значением, иначе потеряется гибкость при адаптиве.

Answer 1

[Ankhena]

Замените флекс на грид

display: grid;
  grid-template-columns: min-content 1fr;

Comments

[Кирилл]

Не помогло: https://codepen.io/Lirrr/pen/yLzzxQW

[Ankhena]

Кирилл, так не иннеру же, а родителю этого вашего блока.

[Кирилл]

да, так все работает. Спасибо! Я правильно понимаю, что без гридов подобное не повторить?

[Ankhena]

Кирилл, например, js и calc. Или display table.

[Кирилл]

Ankhena, Спасибо еще раз. Уже сам хотел жсом считать