Flexbox Artikel mit Überlaufblock Inhalt der Flexbox Behälter

Question

Problem

Block-Inhalte wie Schaltflächen verursacht meine flex Elemente der Flexbox Container zu erweitern und überfluten.

erwartetes Verhalten

In diesem Beispiel sollten die Tasten Seite-an-Seite bleiben mit dem Text Überlauf-Taste mit Auslassungszeichen versteckt. Die Flex-Element-Breiten sollten auf Geschwister basieren und nicht auf Inhalt und bleiben innerhalb des Containers, bleiben reaktiv, wenn der Container die Breite ändert und Flex-Elemente hinzugefügt oder entfernt werden. Ein weiterer Vorbehalt ist, dass ich keinen Überlauf verwenden kann: Versteckt auf den Flex-Elementen oder den Schaltflächen Eltern-Div für mein spezifisches Szenario.

Hier ist die fiddler.

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

Beispiel 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: nun anstatt zu versuchen, mehrere Schaltflächen angezeigt werden, ich bin die Anforderung ändert man nur Taste. Ich wäre immer noch interessiert, wenn jemand es mit mehreren Knöpfen lösen könnte.

Answer 1

Ich habe die Antwort für diejenigen von Ihnen, die interessiert sind. Allerdings musste ich meine anfänglichen Anforderungen ändern. Anstatt zu versuchen, zwei Tasten nebeneinander anzuzeigen, reduzierte ich sie auf eine Taste. In Anbetracht dessen, hier ist die Antwort ... Dies scheint über Browser hinweg zu funktionieren.

fiddle example of resolution

die folgenden Arten hinzufügen:

.child { 
    width: 1%; 
} 

.child.button { 
    width: 100%; 
} 

Ich würde jemand sehr daran interessiert, zu erklären, was mit der Breite% liegt? Scheint so, als ob es mehr wie minimale Breite funktionieren würde.

BEARBEITEN: Danke an Michael_B für die Verknüpfung mit der explanation of width relationship in flex items.