Ширина блока в зависимости от размеров текста?

Question

[Джон Голт]

Как сделать так, чтобы блок растягивался в зависимости от ширины содержимого в нем, строго + указанные паддинги и не больше + перенос слова, в случае если слово не влазит. У блока должна быть задана максимальная ширина.
https://jsfiddle.net/ryxorw1x/

Comments

[Danila]

так если нужен перенос слова если не влазит, то как он будет растягиваться?

[Джон Голт]

Данила: растягивается слишком сильно, а нужно, чтобы по ширине слова + паддинги

[Danila]

Джон Голт: попробуйте через display: inline-block

[Джон Голт]

Данила: не подходит - в моем контейнере (который должен тянуться) есть несколько элементов (включая текст, определяющий ширину), которые должны выстраиватсья вертикально.

[Danila]

Джон Голт: кнопку можно обернуть в блочный элемент

Answer 1

[Александр Миранович]

Так вам нужно https://jsfiddle.net/ryxorw1x/2/

Comments

[Джон Голт]

Да, именно так, но я не могу использовать inline-block, так как в моем контейнере (который должен тянуться) есть несколько элементов (включая текст, определяющий ширину), которые должны выстраиватсья вертикально.

Answer 2

[Михаил Чирский]

С помощью Flexbox, можно сделать так, без inline-block
https://jsfiddle.net/ryxorw1x/3/

Comments

[Джон Голт]

Должна быть задана максимальная ширина
https://jsfiddle.net/ryxorw1x/4/

[Михаил Чирский]

Джон Голт: Вы сами себе пртиворечите)

Как сделать так, чтобы блок растягивался в зависимости от ширины содержимого в нем, строго + указанные паддинги и не больше + перенос слова, в случае если слово не влазит.

А теперь говорите, что должна быть задана максимальная ширина)

P.S. Или я вас не так понял, ну походу не я 1)

[Джон Голт]

Михаил Чирский: прошу прощения, не до конца описал необходимые критерии

[Михаил Чирский]

Джон Голт: я так и не понял, что должно получится у вас в итоге) мой пример от https://jsfiddle.net/ryxorw1x/2/ не отличается, ну он без inline-block, а пример выше с ними, что вы хотите в итоге получить?)