左と右のdivが互いに近すぎる場合、中のdivを下に移動するにはどうすればよいですか？

Question

私は3つのdiv要素を持っています。 [左] [中央] [右]

[左]と[右]が互いに接近し続けると、中央のdivに触れようとしているので、中央のdivは下に移動する必要があります以下の図。

[左] _______ [右]

[center] 

私はこの十分ますが、この位置を達成することができませんを試してみました。私はこれが新しいコンセプトではないと確信しています。フレックスボックスを試しましたが、目的の動作を達成できませんでした。私はどんな種類の助けにも感謝します。ありがとうございました。

Answer 1

質問の情報が不足しているという私の要点を説明するために、ここではあなたが求めるものを正確には解決しますが、問題を解決するのには役立ちません。より多くの文脈を提供してください。

div {line-height:3em; text-align:center} 
 
.left, .right {width:200px; max-width:calc(50% - 2px); float:left; border:1px solid; overflow:hidden} 
 
.right {float:right}

<div class="left">This is the left div</div> 
 
<div class="right">This is the right div</div> 
 
<div class="middle">This is the center div</div>