title: Matching widths of elements with dynamic content along a row using css only
body: <p>I have been attempting to use flexbox for this, but any other css-only solution would be acceptable.</p>
  
  <p>I want all items along a row to expand to the width of the largest item, so the result is identical widths. However, at the same time without the parent element expanding beyond the minimum size needed to accomplish this.</p>
  
  <p>If you look at my Codepen example, altering the flex-grow value on <code>&lt;ul&gt;</code> elements will make this work for some of the demo examples, but not all.</p>
  
  <p><a href="http://codepen.io/MattyBalaam/pen/VepxWq" rel="nofollow">http://codepen.io/MattyBalaam/pen/VepxWq</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>div {
    display: flex;
    justify-content: center;
  }
  ul {
    display: flex;
    justify-content: center;
    padding: 0 0 2em;
    flex-grow: 0.15;    
  }
  li {
    list-style: none;
    margin: 2em;
    flex: 1 1 0;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;
    &lt;ul&gt;
      &lt;li&gt;1&lt;/li&gt;
      &lt;li&gt;2&lt;/li&gt;
      &lt;li&gt;----3----&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>