Flexbox items with Flexbox container block content overflow

Question

Problem

Blocking content, such as 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 by the ellipsis. The widths of flexible elements should be based on marriage, not content, and remain inside the container while remaining responsive as the container changes width and flexibility elements are added or removed. Another caveat is that I cannot use overflow: hidden flex elements or parent div buttons for my specific scenario.

Here is the fiddler .

Html example

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

CSS example

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

Answer 1

, . . , , , . , ... .

:

.child {
    width: 1%;
}

.child.button {
    width: 100%;
}

, - , %? , , min-width.

EDIT: Michael_B flex.