title: CSS when inline-block elements line-break, parent wrapper does not fit new width
body: <p>How do you get an <code>inline-block</code> element to fit its content width, if the content line-breaks because of screen width?</p>
  
  <pre><code>&lt;!-- parent inline-block --&gt;
  &lt;div style='display: inline-block;'&gt;
      &lt;div style='display: inline-block; width:200px;'&gt;&lt;/div&gt;
      &lt;!--
          If this child line breaks, 
          two 200px wide blocks are stacked vertically.
          That should make the parent width 200px,
          but the parent stays much wider than that
      --&gt;
      &lt;div style='display: inline-block; width:200px;'&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I can't think of how to phrase the question so it sounds easy, but I put together a simple <strong><a href="https://jsfiddle.net/wcx1c9tu/1/">JSFiddle</a></strong> illustrating.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#wide {
    position: relative;
    width: 100%;
    border: 1px solid black;
    padding: 5px;
  }
  #narrow {
    position: relative;
    width: 175px;
    border: 1px solid black;
    padding: 5px;
  }
  .wrap {
    display: inline-block;
    border: 1px solid green;
    margin: auto;
  }
  .inlineblock {
    display: inline-block;
    vertical-align: top;
    background: red;
    min-width: 100px;
    min-height: 100px;
    border: 1px solid black;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;section id='wide'&gt;
    &lt;div class='wrap'&gt;
      &lt;div class='inlineblock'&gt;&lt;/div&gt;
      &lt;div class='inlineblock'&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/section&gt;
  &lt;p&gt;
    When the red inline-blocks are forced to line break, how do you make a parent with display:inline-block (the green border) snap to fit? How do you get rid of all the extra horiztonal space in the lower green bordered div?
  &lt;/p&gt;
  &lt;section id='narrow'&gt;
    &lt;div class='wrap'&gt;
      &lt;div class='inlineblock'&gt;&lt;/div&gt;
      &lt;div class='inlineblock'&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>