CSS динамически добавленные элементы совпадают Размер содержимого

Question

Я создаю элементы с небольшим количеством текста в них, и я хочу, чтобы каждый, чтобы быть размером текста + некоторой обивка

cursor: pointer; 
    padding: 10px 25px; 
    background-color: #323232; 
    color: #FFF; 
    margin-top: 5px; 
    border-radius: 2px; 
    font-size: 1.1rem; 
    display: flex; 
    justify-content: center; 
    flex-direction: column; 
    font-weight: 300; 
    min-height: 48px; 
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); 

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

https://jsfiddle.net/zbrmLdwv/

Answer 1

В вашем CSS, добавьте:

float:left; 
clear:left; 

Это делает элемент "коробочный", поэтому он автоматически оборачивает текст.

JS Fiddle

Answer 2

width проблема вы столкнулись, это может быть связано с их display собственности. Пожалуйста, добавьте

p{ display: inline-block } 

Заменить p с правильным селектором элемента, и проверить, если проблема решена.