CSS: Wie erzwinge die Breite in einem Container mit dynamischer Breite?

Question

Zunächst ist hier die Geige: https://jsfiddle.net/u8v3rgyt/1/

Das grundlegende Szenario ist dies: Ich habe etwas Text, der in der Länge variieren wird. Unter diesem Text habe ich eine Spalte von (EDIT: eine variierende Anzahl von) Tasten, die auch Text haben, der variiert. Was ich will ist, dass der Text die Gesamtbreite steuert, und dann die Breite der Schaltfläche/die Breite der Schaltflächen der Schaltflächenspalte als Antwort anpassen lässt. Mit anderen Worten, für zwei verschiedene Größen von Text, ich versuche folgendes zu erreichen:

// Short text 
La la la la 
[Button 1 
    text] 
[Button 2 
    with long 
    text] 

// Longer text 
La la la la la la la la la la 
[Button 1 text] 
[Button 2 with long text] 

aber ich bekomme:

// Short text 
La la la la 
[Button 1 text] 
[Button 2 with long text] 

Ich fühle mich wie ich in der Nähe bin, aber ich kann‘ t bekomme den Button-Container, um die richtige Breite zu haben (und somit kann ich die Breite meiner Buttons nicht begrenzen). Oder besser gesagt, ich kann das, aber dafür muss ich eine feste Breite auf den Text setzen, und das funktioniert nicht, weil ich die ganze Sache brauche, um ihre Größe basierend auf dem Text anzupassen.

Jede Hilfe wäre willkommen.

Answer 1

Wie ich verstehe, soll der Text die Breite des Bereichs diktieren, in dem die Schaltflächen angeordnet sind. Mit Hilfe der CSS3-Modell Flex-Box konnte man etwas in dieser Richtung tun:

See this fiddle

HTML

<div class="container"> 
    <p>Some text blah blah blah, blah blah blah</p> 
    <div class="inner"> 
    <button>Button 1</button> 
    <button>Button 2</button> 
    </div> 
</div> 

CSS

.container { 
    display: inline-block; 
    border: 1px solid red; 
    margin-bottom: 24px; 
} 

.inner { 
    display: flex; 
    flex-wrap: wrap; 
} 

button { 
    flex-grow: 1; 
}