How to make flex div take only the needed space?
css, flexbox
Solution
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.
Problem
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> ```