Flexbox элементы с переливом содержимого блокировать Flexbox контейнер

Question

Проблема

содержания Блока как кнопка вызывает мои гибкие элементы для расширения и переполнения контейнера Flexbox.

Ожидаемое поведение

В этом примере, кнопки должны оставаться бок о бок с кнопки текста перелива скрытой многоточие. Ширины гибких элементов должны быть основаны на браке, а не на содержании, и оставаться внутри контейнера, оставаясь отзывчивым, поскольку контейнер меняет ширину и элементы гибкости добавляются или удаляются. Еще одно предостережение заключается в том, что я не могу использовать переполнение: скрытые элементы flex или кнопки parent div для моего конкретного сценария.

Адрес fiddler.

Пример 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> 

Пример 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: Теперь, вместо того, чтобы пытаться отобразить несколько кнопок, я меняю требование только один кнопка. Мне все равно было бы интересно, если кто-то сможет решить это с помощью нескольких кнопок.

Answer 1

Я придумал ответ для тех из вас, кто заинтересован. Однако мне пришлось изменить мои первоначальные требования. Вместо того, чтобы пытаться отображать две кнопки, бок о бок, я уменьшил ее до одной кнопки. Учитывая это, вот ответ ... Это похоже на работу в браузерах.

fiddle example of resolution

Добавьте следующие стили:

.child { 
    width: 1%; 
} 

.child.button { 
    width: 100%; 
} 

Я был бы очень заинтересован в кого-то объяснить, что с шириной%? Похоже, это больше похоже на то, как минимальная ширина может работать.

EDIT: Благодаря Michael_B для ссылки на explanation of width relationship in flex items.