Как подогнать ширину блока внутри flex под контент?

Question

[Вячеслав Яшников]

Столкнулся с проблемой, не могу понять как решить, ширина блока внутри flex растягивается не зависимо от конвента.


На скрине видно, что первый блок слишком широкий и не сужается из-за того что там текст в две строки, как сделать, чтобы блок был не длиннее первой длинной строки?

Вот пример того, что хочу получить:


При этом не задавая фиксированную ширину блока.
Установка тега<br>перед "в приложении" решает эту проблему, но это получается не адаптивно, так как перенос на мобильной версии или на других разрешениях экрана в других местах

Comments

[Ankhena]

Немножко вам может помочь
flex-basis: 0; в сочетании с flex-grow: 1;

При некоторых раскладах посимпатичнее будет с text-wrap: balance, но пока без Safari (но и ничего не сломает)

А так, это особенности текста. (br, js)

p.s. уже нет смысла в использовании костыля с отрицательными margin для флекс-контейнера. Прекрасно работает gap

[Вячеслав Яшников]

Ankhena, gap не работает в safari 13 многие требуют ее поддержку(

[Ankhena]

Вячеслав Яшников, да, бывает не везет

Answer 1

[rootnoroot]

задать ширину логично же

Comments

[Вячеслав Яшников]

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

Я хочу чтобы ширина подстраивалась под контент блока

[Вячеслав Яшников]

установка тега <br> перед "в приложении" решает эту проблему, но это получается не адаптивно, так как перенос на мобильной версии или на других разрешениях экрана в других местах

Answer 2

[IvanU7n]

как сделать, чтобы блок был не длиннее первой длинной строки?

никак, т.к. браузер не умеет уменьшать размер блока после его переполнения и переноса текста на несколько строк

Comments

[Вячеслав Яшников]

может тогда смотреть в сторону увеличения размеров блока, например задать max-width: min-content и затем увеличивать, как-то сложно получается

[IvanU7n]

Вячеслав Яшников, не особо поможет, т.к. блок будет ограничен длиной наибольшего слова

полностью динамическое решение средствами css невозможно из-за того как работает layout в браузерах