Почему flex div 100% ширина родительского div?

Question

Я не понимаю, почему flex div занимает 100% ширины своего родительского элемента. Возьмите следующий фрагмент:

#wrapper {
  width: 100%;
  height: 100px;
  background: green;
}

#flex {
  color: white;
  display: flex;
  flex-direction: row;
  background: blue;
}

<div id="wrapper">
   <div id="flex">
     <div>Item</div>
     <div>Item</div>
     <div>Item</div>
     <div>Item</div>
   </div>
</div>

Почему flex div расширяется до 100% ширины родительского элемента? Есть ли способ сделать Flex DIV таким же широким, как его содержимое?

Любая помощь приветствуется, Спасибо

Answer 1

Ваш #flex div имеет display: flex. Это команда уровня блока (например, display: block), которая, по дизайну , занимает всю ширину родительского элемента. Вместо этого используйте display: inline-flex.