如何使flex div只占用所需的空间？

Question

如何制作flex div以仅占用所需的空间？ 它占用了所有可用空间。

我想排队div，在需要时包装。问题是Flex容器占用的空间比实际需要的多。

以下是http://cssdeck.com/labs/wvhe64ot

的示例

＆＃13;

＆＃13;

#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;
}

＆＃13;

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>

＆＃13;

＆＃13;

＆＃13;

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表示您至少要占用所需空间的空间

Answer 4

您可以将 flex-grow: 0 放在弹性项目上：

#container div {
    padding: 10px;
    border: 2px solid black;
    flex-grow: 0;
}