title: Wrapping text forces containing element to max-width
body: <p>I have several <code>div</code>s that are all styled as inline-blocks, and therefore sit in a row next to each other. These divs have a <code>max-width</code> of 140px, and contain text that cause them to vary in width up to that size.</p>
  
  <p><a href="https://jsfiddle.net/ex4n8m49/1/" rel="noreferrer" title="As demonstrated in this fiddle">As demonstrated in this fiddle</a>, text that is wider than the <code>max-width</code> property wraps, as you would expect. The problem is that it also seems to force its container <code>div</code> to stay at the <code>max-width</code>, even though the wrapped text doesn't technically require that much space.</p>
  
  <p>Is there a cross-browser, HTML/CSS-only way to "shrink-wrap" these blocks to their smallest width once the text wraps? I'm aware that I can force it with appropriately placed <code>&lt;br&gt;</code>s, but these blocks are supposed to contain user-entered text.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.block {
      display: inline-block;
      vertical-align: top;
      max-width: 140px;
      background-color: lightgrey;
      text-align: center;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="block"&gt;A single line&lt;/div&gt;
  &lt;div class="block"&gt;Two distinctively different lines&lt;/div&gt;
  &lt;div class="block"&gt;A somewhat egregious demonstrative amount of text&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>