title: How do I override a parent element's width with an implicit child element's width?
body: <p>I'd like to specify the width of a div element to be the width of a child img element contained within. However, this width is implicit depending on the size of the source image.</p>
  
  <p>The first flex item shows the effect I'm trying to achieve, however, I've had to manually set the value of the width to 150px. How can this be achieved dynamically (preferably without javascript)?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
      &lt;html&gt;
       &lt;head&gt;
        &lt;style&gt;
         .flex-item {
          border: 1px solid #30b0b0;
          color: #303030;
          text-align: center;
          padding: 5px;
         }
         
         .flex-container {
          border: 1px solid #30b0b0;
          display: flex;
          justify-content: space-around;
          list-style: outside none none;
          padding: 5px;
         }
        &lt;/style&gt;
       &lt;/head&gt;
       &lt;body&gt;
        &lt;ul class="flex-container"&gt;
         &lt;li class="flex-item"&gt;
          &lt;div style="width: 150px; margin: auto;"&gt;
           &lt;img height="100px" src="http://upload.wikimedia.org/wikipedia/commons/thumb/a/aa/Metrostation_Mladost_1.JPG/150px-Metrostation_Mladost_1.JPG"&gt;
           &lt;p&gt;This text stays within the image&lt;/p&gt;
          &lt;/div&gt;
         &lt;/li&gt;
         &lt;li class="flex-item"&gt;
          &lt;div&gt;
           &lt;img height="100px" src="http://upload.wikimedia.org/wikipedia/commons/thumb/a/aa/Metrostation_Mladost_1.JPG/150px-Metrostation_Mladost_1.JPG"&gt;
           &lt;p&gt;This text sticks out further than the image&lt;/p&gt;
          &lt;/div&gt;
         &lt;/li&gt;
        &lt;/ul&gt;
       &lt;/body&gt;
      &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>