Как создать контейнеры с взаимно изменяющейся шириной?

Question

[aaltqna]

Есть 2 контейнера в общем родителе с flex-grow. У каждого установлена авто-ширина, т.е. занимают место по своему контенту:


Если в родителе перестает хватать ширины, то больший по ширине контейнер должен начать сжиматься, меньший остается как есть.


Если контейнеры поравнялись в ширине, то должны начаться сжиматься оба:


При увеличении ширины родительского контейнера - все возвращается в обратном порядке, т.е:
1) Если оба сжаты, то оба растут
2) Как только один вырос из них достигает своей авто-ширины, то он перестает расти и начинает расти другой
3) Как второй достиг авто-ширины, то и он перестает расти и все возвращается к первому скриншоту

Сделал все это через js, но интересует css реализация. Можно и bootstrap классы использовать. Немного уточнил и упростил прошлый вопрос. Т.е. получается цепной flex-shrink какой-то. Если это невозможно, то хотелось бы узнать почему. Пока только разобрал, что flex-shrink мне как раз плохо подходит, т.к. требует установленной ширины и применяется к ней умножение на коэф заранее установленный.

Comments

[imko]

flex: 1 1 0;
max-width: fit-content;

?

[aaltqna]

imko, на каждый из контейнеров? Вообще никакого эффекта

[imko]

aaltqna, песочница может я не так понял? вроде все работает) Жмется сначала большой, потом оба когда они становятся одинаковыми. Потыкай ширину у .test

[aaltqna]

imko, да, действительно все работает по ссылке. Видимо у меня что-то лишнее мешает, буду править. Благодарю

[imko]

aaltqna, ну тогда прошу отметить мой ответ решением)

Answer 1

[imko]

песочница

Comments

[aaltqna]

display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;

Без этих трех строчек не работает, значит в них вся магия. Буду подробнее изучать

[imko]

aaltqna, эти три строчки для обрезки текта нужны

[imko]

aaltqna, https://stackoverflow.com/questions/3922739/limit-...

[aaltqna]

-webkit-line-clamp: 1

the number of lines after which the content will be clamped

По сути, все он делает. Т.е. получается, что display: flex держит 2 элемента равными друг относительно друга, но как только один из них хочет занять лишнее место, т.е. так:

То line-clamp обрезает его "выпавшие" строки.

Правильно?

[imko]

aaltqna, да)

Answer 2

[Lynn «Кофеман»]

Например вот так:

.box {
  display: flex;
  font-size: 18px;
  background: #fed;
  margin: 1ex;
}

.box > div {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: #def;
  margin: 0 1ex;
  flex: 1 1 0;
  max-width: fit-content;
}

Comments

[Lynn «Кофеман»]

Это я просто склонировал и не посмотрел какие там настройки.

[aaltqna]

Я изначально не знаю какой из контейнеров шире другого, поэтому так не совсем получается полностью без js. Но вариант хороший, примерно так с js и делал

[Lynn «Кофеман»]

aaltqna,
тогда так. Обновил ответ.