css - 如何让 flex div 只占用需要的空间？

Question

如何使 flex div 只占用所需的空间？它正在占用所有可用空间。

我想要排列 div，在需要时换行。问题是 flex 容器占用的空间比实际需要的多。

这是一个例子 http://cssdeck.com/labs/wvhe64ot

#outer {
    border: 5px solid green;
    width: 400px;
}
#container {
    display: flex;
    border: 5px dashed black;
    flex-wrap: wrap;
}
#container div {
    padding: 10px;
    border: 2px solid black;
}

Dashed border should be close to the small divs
<div id="outer">
  <div id="container">
    <div>Lipsum</div>
    <div>Lipsum</div>
    <div>Lorem ipsum dolor sit amet</div>
    <div>Lorem ipsum dolor sit amet</div>
   </div>
<div>

Answer 1

您可能正在寻找 display: inline-flex 属性。它像对待 display:flex 属性一样对待它的 child ，只是它本身不会自动增长。