为什么 flex div 是父 div 的 100% 宽度？

Question

我对为什么 flex div 占据其父元素 100% 的宽度感到困惑。取下面的sn-p：

#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），by design 占据了父级的整个宽度。请改用display: inline-flex。