title: How to set flex items to equal width according to the item with the longest content?
body: <p>Here's the scenario:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;style&gt;
  .flex-container {
      display: flex;
      border: 1px solid black;
  }
  
  .flex-item {
      background-color: cornflowerblue;
      height: 1.7rem;
      padding: 0 1.2rem;
      flex: 1 1 33.33333%;
      white-space: nowrap;
      max-width: 33.33333%;
  }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div class="flex-container"&gt;
      &lt;div class="flex-container"&gt;
        &lt;button class="flex-item"&gt;Foo&lt;/button&gt;
        &lt;button class="flex-item"&gt;Bar&lt;/button&gt;
        &lt;button class="flex-item"&gt;Long ass text here&lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The buttons are the same size but the problem is that they don't scale in size according to the flex item with longest content. Instead, the text of the last button here overflows. This is how it looks like:</p>
  
  <p><a href="https://i.stack.imgur.com/yYQ6Z.png" rel="noreferrer"><img src="https://i.stack.imgur.com/yYQ6Z.png" alt="enter image description here"></a></p>
  
  <p>And this is how I want it to look like:</p>
  
  <p><a href="https://i.stack.imgur.com/C3L2g.png" rel="noreferrer"><img src="https://i.stack.imgur.com/C3L2g.png" alt="enter image description here"></a></p>
  
  <p>So in short, I want <strong>3 flex buttons with same width and height where the width should be determined according to button with the longest content</strong>. Also, I'd rather do this with CSS only (if it's possible).</p>
  
  <p><strong>EDIT:</strong> Because there seems to be some misunderstandings, I would like to clarify that the width should change <strong>dynamically</strong> and thus work with any texts given for the buttons, not just with the ones shown above. In other words, you can't just add e.g. <code>width: 10rem</code> for flex-item directly because it only works in specific situation.</p>