div要素を3つの要素に埋め込む方法は、中央の要素に動的な幅がありますか？

Question

私は、ユーザーが単語の接頭辞または接尾辞のいずれかを挿入するためのインターフェイスを設計しようとしています。理想的には、単語（ランダムに選択された）がラッパーの中央に表示され、次にいずれかの側のテキストボックスがラッパーの端まで伸びます。以下の（アンダースコアは、テキスト入力フィールド、小文字がされている可能な入力）のようになります

<div class="wrapper"> 
    <div class="left">{{text input}}</div> 
    <div class="center">{{dynamic content}}</div> 
    <div class="right">{{text input}}</div> 
</div> 

が

：ここでは、セットアップのです

|________CONDITION________| => |____pre_CONDITION________| or |________CONDITION_al_____| 
|__________ALLOW__________| => |______dis_ALLOW__________| or |__________ALLOW_ance_____| 
|___________RUN___________| => |______over_RUN___________| or |___________RUN_ner_______| 

私はこの前に同様の問題を見てきましたが、私これに対する解決策を見つけることができませんでした。中央のdivには静的な幅がありません。したがって、determine the widths manuallyはできません。私は本当にchange the HTMLできないので、実際のコンテンツ（スタイリングだけでなく）を格納するために左右のdivが必要です。私は、中央のdivが任意の幅を持つことができ、左と右のdivが残りの水平スペースを埋めるようにするソリューションを探しています。

CSSでこれを行う方法はありますか？あなたのお時間をありがとうございました。

Answer 1

使用flex

.wrapper { 
 
    display: flex; 
 
} 
 
.left, .right { 
 
    flex: 1; 
 
    white-space: nowrap; 
 
    border: 1px solid 
 
} 
 
.center { 
 
    flex: 0; 
 
    white-space: nowrap; 
 
    border: 1px solid 
 
}

<div class="wrapper"> 
 
    <div class="left">text input</div> 
 
    <div class="center">dynamic content</div> 
 
    <div class="right">text input</div> 
 
</div> 
 
<div class="wrapper"> 
 
    <div class="left">text input</div> 
 
    <div class="center">dynamic content, longer</div> 
 
    <div class="right">text input</div> 
 
</div>

それともdisplay: table

.wrapper { 
 
    display: table-row; 
 
} 
 
.left, .right { 
 
    display: table-cell; 
 
    width: 50%; 
 
    white-space: nowrap; 
 
    border: 1px solid 
 
} 
 
.center { 
 
    display: table-cell; 
 
    width: 1%; 
 
    white-space: nowrap; 
 
    border: 1px solid 
 
}

<div class="wrapper"> 
 
    <div class="left">text input</div> 
 
    <div class="center">dynamic content</div> 
 
    <div class="right">text input</div> 
 
</div> 
 
<div class="wrapper"> 
 
    <div class="left">text input</div> 
 
    <div class="center">dynamic content, longer</div> 
 
    <div class="right">text input</div> 
 
</div>