title: Flexbox items with block content overflow the flexbox container
body: <p><strong>Problem</strong></p>
  
  <p>Block content like buttons causes my flex items to expand and overflow the flexbox container.</p>
  
  <p><strong>Expected Behavior</strong></p>
  
  <p>In this example, the buttons should remain side-by-side with the button text overflow hidden with ellipsis. The flex items widths should be based on siblings and not content, and stay inside the container remaining responsive as the container changes widths and flex items are added or removed. Another caveat is that I cannot use overflow:hidden on the flex items or the buttons parent div for my specific scenario.</p>
  
  <p>Here is the <a href="http://jsfiddle.net/y2eqmjsz/11/" rel="nofollow noreferrer">fiddler</a>.</p>
  
  <p><a href="https://i.stack.imgur.com/kYm78.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kYm78.png" alt="Block content causes flex items to overflow container"></a></p>
  
  <p>Example Html</p>
  
  <pre><code>&lt;div class="container" style="width: 400px;"&gt;
  
    &lt;div class="child one"&gt;
      Child One
      &lt;br&gt;Lorem ipsum
      &lt;br&gt;dolor sit amet
    &lt;/div&gt;
  
    &lt;div class="child two"&gt;&lt;div&gt;&lt;button class="text"&gt;Child Two with a loooooooooooooooooong naaaaaaaaaaaaaaaaaaaaaaaaaaaaaame&lt;/button&gt;&lt;button&gt;button two&lt;/button&gt;&lt;/div&gt;&lt;/div&gt;
  
  &lt;div class="child three"&gt;Some Text&lt;/div&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Example CSS</p>
  
  <pre><code>div {
    border: 3px solid;
  }
  
  .container {
    padding: 10px;
    background-color: yellow;
    display: -webkit-flex;
    display: flex;
  }
  
  .child {
    flex: 1 1 auto;
    padding: 10px;
    margin: 10px;
    background-color: #eee;
  }
  
  .child.one {
    color: green;
  }
  
  .child.two {
    flex: 6 1 auto;
    color: purple;
  }
  
  .child.two button {
    display: inline-block;
  }
  
  .child.three {
    color: blue;
  }
  
  .text {
    text-overflow: ellipsis;
    overflow: hidden;
  }
  </code></pre>
  
  <p><strong>EDIT:</strong> Now, instead of trying to display multiple buttons, I'm changing the requirement to only one button. I would still be interested if somebody is able to solve it with multiple buttons.</p>