title: How do I set equal widths for two divs side by side in a flexbox?
body: <p>With reference to <a href="https://stackoverflow.com/questions/5351634/css-side-by-side-divs-auto-equal-widths">CSS side by side div&#39;s auto equal widths</a>, I am seeking to solve the same problem, only I am using flexbox and do not wish to use table styling for the content I'm displaying.</p>
  
  <p><a href="https://jsfiddle.net/rdh61g7c/" rel="noreferrer">https://jsfiddle.net/rdh61g7c/</a></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>#outer {
    width: 1024px;
    height: 768px;
    
    display: flex;
    justify-content: center;
    align-items: center;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="outer"&gt;
    &lt;div class="inner"&gt;Inner HTML content has larger natural width&lt;/div&gt;
    
    &lt;div class="inner"&gt;Inner HTML content has smaller natural width&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>So the two columns' widths will stretch with their content but the left column will have a larger width as a result. To keep the two columns symmetrical about the center, I need the right column, which currently has a shorter width than the left column, to increase to equal the left. How do I do that in flexbox layout?</p>
  
  <p><strong>Edit</strong>: I see many of the answers basically assigning a fixed width to <strong>both</strong> containers (~50%). That's not what I'm looking for. The left container is free to stretch to whatever width the content needs, subject to a maximum, and that shouldn't be touched. The right container needs to expand its width to match the left.</p>
  
  <p>Can this be done without resorting to JavaScript?</p>