如何使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,除了它本身不会自动生长.

Answer 2

对我有帮助的是为列导向的元素设置它：

align-items: flex-start
display: flex
flex-direction: column

或者对于行定向元素：

display: flex    
justify-content: flex-start

Answer 3

在 div 上设置 flex-shrink: 0 ，您至少需要占用空间