Как задать flex блоку длины не на всю ширину, а только на ширину самого длинного дочернего элемента?

Question

[Stepan007]

https://jsfiddle.net/5qderuwz/

Comments

[sergski]

display: inline-flex;

[Ankhena]

Интересно, почему это не помогло с первого раза? Но попробую повторить:
width: fit-content

Альтернатива: inline-flex вместо просто flex.

[Stepan007]

Ankhena, помогло fit-content, но почему-то в консоли показывает длину элемента все 100%, а по стилям только на ширину контента действует

При display: inline-flex, если выше стоял ещё элемент, они два элемента в одну строку идут, а не по очереди сверху вниз

[Ankhena]

Stepan007,

При display: inline-flex, если выше стоял ещё элемент, они два элемента в одну строку идут, а не по очереди сверху вниз

Да, именно так ведут себя инлайн-блочные элементы.

но почему-то в консоли показывает длину элемента все 100%, а по стилям только на ширину контента действует

Ну напишите в багтрекер хрома или поищите существующие записи.

Answer 1

[blatisgense]

Чтобы так сделать задайте контейнеру не flex, а inline-flex и тогда он будет со свойствами инлайн элемента.