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

Question

[olezhenka]

https://jsfiddle.net/olegmihh/jqsqpv0c/
элемент .slider имеет ширину на 100%, а я хочу чтобы его ширина была зависима от элементов внутри.

width: auto; не помогает,
position: absolute; помог, но я как-то не охотно хочу использовать абсолютное позиционирование там, где оно не нужно.
Есть еще варианты?

Comments

[Dima Polos]

Еще варниант - задать элементу display: table-cell; prntscr.com/hrcg70

Answer 1

[Илья]

.slider {display: inline-block;}

Comments

[olezhenka]

Вот только что сам до этого додумался и вы еще ответили. Спасибо)

Answer 2

[Dima Polos]

Если родителю задать display: flex, то все элементы -потомки будут иметь ширину по контенту, и встанут в ряд. Если надо чтобы они выстроились вертикально, то родителю еще добавить стоит flex-direction: column;
UPD: prntscr.com/hrcg70
Добавить элементу display: table-cell; :)