CSS：動的な幅のコンテナ内で幅を適用する方法は？

Question

最初に、ここにフィドルがあります：https://jsfiddle.net/u8v3rgyt/1/

基本的なシナリオは次のとおりです。長さが異なるテキストがあります。このテキストの下には、（EDIT：のさまざまな数の）ボタンがあります。これらのボタンにもさまざまなテキストがあります。私が望むのは、テキストが全体の幅を制御し、ボタンの列の幅/ボタンの幅をそれに応じて調整させることです。つまり、テキストの2つの異なるサイズのために、私は次のことを達成しようとしている：

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

が、私は得る：

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

「私は近いんだように私は感じるが、私ができますボタンコンテナに正しい幅を持たせてください（ボタンの幅を制限することはできません）。そうではなく、テキストに固定幅を置く必要があります。テキストに基づいてサイズを調整する必要があるため、これは機能しません。

ご協力いただければ幸いです。

Answer 1

私が理解しているように、テキストがボタンの配置されている領域の幅を決める必要があります。 CSS3フレックスボックスモデルを使用して、あなたはこれらの線に沿って何かをすることができます：

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