How to make flex div take only the needed space?

Question

How do I make a flex div to take only the space needed? It is taking all available space.

I want to have lined up divs, wrapping when it needs. Problem is that the flex container takes more space than it actually needs.

Here’s an example 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

You might be looking for the display: inline-flex property. It treats its children just like the display: flex property, except it itself does not automatically grow.

Answer 2

set flex-shrink: 0 on div that you what to take at least required space