Flexbox items with block content overflow the flexbox container

Question

Problem

Block content like buttons causes my flex items to expand and overflow the flexbox container.

Expected Behavior

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.

Here is the fiddler.

Example Html

<div class="container" style="width: 400px;">

  <div class="child one">
    Child One
    <br>Lorem ipsum
    <br>dolor sit amet
  </div>

  <div class="child two"><div><button class="text">Child Two with a loooooooooooooooooong naaaaaaaaaaaaaaaaaaaaaaaaaaaaaame</button><button>button two</button></div></div>

<div class="child three">Some Text</div></div>

Example CSS

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;
}

EDIT: 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.

Answer 1

I have come up with the answer for those of you who are interested. However I have had to modify my initial requirements. Instead of trying to get two buttons to display side-by-side, I reduced it down to one button. Given that, here is the answer... This appears to work across browsers.

fiddle example of resolution

Add the following styles:

.child {
    width: 1%;
}

.child.button {
    width: 100%;
}

I would be very interested in somebody explaining what is up with the width %? Seems like it is acting more like how min-width might work.

EDIT: Thanks to Michael_B for linking to the explanation of width relationship in flex items.