Comment adapter un flex div de la largeur de contenu

Mon idée est de donner une adaptation div de largeur. Quand j'ai juste un point, la largeur doit être le même que l'élément à l'intérieur de la div conteneur.

Toute idée de comment faire cela?

Exemple: http://codepen.io/tomasfrancisco/pen/PNvLLw

HTML:

<div id="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

<div id="container">
  <div class="item"></div>
</div>

CSS:

#container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  max-width: 200px;
  padding: 10px;
  margin: 20px;
  background-color: blue;
}
#container .item {
  width: 80px;
  height: 50px;
  background-color: red;
  margin: 10px;
}

OriginalL'auteur Tomás Francisco | 2016-05-18