Как задать колонкам flex-shrink + text-overflow: ellipsis, сохранив авто-ширину?

Question

[aaltqna]

Есть меню с кнопками, посередине него должны быть 2 кнопки с flex-shrink, причем содержание кнопок должно скрываться при переполнении в "...".

Сделал класс:

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

Но не получается его применить, сохранив все условия:
1) "синие" кнопки должны иметь ширину по контенту, если хватает места.
2) "синие" кнопки должны сужаться до минимального значения и скрываться в "..." если места не хватает.



https://codepen.io/aaltcode/pen/LYewNrO

Этого можно как-то добиться?

Comments

[Ankhena]

Сначала расскажите вот что: у вас есть два блока с неопределенной шириной.
Если они в сумме не влезают в оставшееся место, то который из них должен обрезаться? В каких пропорциях? А если в одном блоке одно слово, а в другом десять?

[aaltqna]

Ankhena, да, это моя вторая проблема. В идеале:

(50% - это от ширины их родительского элемента)

1) контент 1 блока > 50%, контент 2 блока < 50% = 1 блок растягивается насколько возможно, лишний контент обрезается. 2 блок остается как есть.
2) контент 1 блока < 50%, контент 2 блока > 50% = 1 блок остается как есть, 2 блок растягивается насколько возможно, лишний контент обрезается
3) контент 1 блока >= 50%, контент 2 блока >= 50% = блоки должны занять 50 на 50 место родителя, а их лишний контент должен быть обрезан

[aaltqna]

Ankhena, ну и уже после этого, при изменении ширины родительского элемента, оба блока должны пропорционально сжиматься. Поэтому я их во флекс обернул

[Ankhena]

aaltqna, отлично.
А теперь просто переведите это на JS.
Получить ширину родителя.
Получить ширину каждого.
if else
задать нужные классы в зависимости от условий

[aaltqna]

Ankhena, да, изначально так и хотел, но решил, что смогу бутстрапом обойтись, видимо не судьба

[Ankhena]

aaltqna, ну откуда бутстрап узнает что ему делать..