CSS3 : ovflexboxeserflow handling

How do I handle block item content overflowing flexbox?

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 text">
    Child Two
  </div>

</div>

<button id="test1">
  Toggle Text
</button>

<button id="test2">
  Add Flex Items
</button>

<button id="test3">
  Toggle Block Item
</button>

<button id="test4">
 Toggle Width
</button>

<button id="reset">
  Reset
</button>

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: 5 1 auto;
  color: purple;
}

.child.two button {
  display: inline-block;
}

.child.three {
  color: blue;
}

.text {
  text-overflow: ellipsis;
  overflow: hidden;
}

JavaScript

// In this scenario, buttons inside the second flex item should not expand the flex item and cause
// the flex items to overflow the flex container. But the flex items should remain responsive as
// the container changes widths and flex items are added.

// Toggle Text: Sets text long or short
// Add Flex Items: Adds additional flex items
// Toggle Block Item: Toggles between text and buttons
// Toggle Width: Toggles between shorter and longer widths
// Reset: resets

var longtext = "Child Two with a loooooooooooooooooong naaaaaaaaaaaaaaaaaaaaaaaaaaaaaame";
var shorttext = "Child Two";
var text = shorttext;
$("#test1").click(function() {
  text = ($(".text").text() == longtext) ? shorttext : longtext;
  $(".text").text(text);
})

$("#test2").click(function() {
  $(".container").append('<div class="child three">Some Text</div>')
})

var toggleTest3 = true;
$("#test3").click(function() {
  var item = $(".child.two");
  if (toggleTest3) {
    item.removeClass("text");
    item.html('<div><button class="text">' + text + '</button><button>button two</button></div>')
  } else {
    item.addClass("text");
    item.html(text);
  }
  toggleTest3 = !toggleTest3;
})

var toggleTest4 = true;
$("#test4").click(function(){
	if (toggleTest4) {
  	$(".container").css("width", "600px");
  } else {
  	$(".container").css("width", "400px");
  }
  toggleTest4 = !toggleTest4;
})

$("#reset").click(function() {
  $(".container").css("width", "400px");
  $(".child.two").html(shorttext);
  $(".child.three").remove();
})