Firefox：兄弟付き自動改行[float：right]要素+オーバーフローテキスト

Question

本当に特定のグラフィック実装でFirefoxに問題があります。

この問題を理解するには、fiddle：Firefoxで問題が発生します。他のブラウザでは、期待される結果（IE9を含む）が表示されます。

デザイン私が必要：

PNG illustration

• 私は一定の幅でメインブロック（点線の境界線）を持っています。
• メインブロック内に上下に2行あります。 2行は、メインブロックの右側に配置する必要があります。
• 各行には2つの子が含まれています。左のものは動的なテキスト（グレーの背景）、正しいものはオプションのもの（青の背景）です。上の右側には固定幅のアイコン（オレンジ）があり、右下には動的温度（小数点以下1桁まで）があります。
• ブロックは固定の5ピクセルのマージンで区切られています。
• テキストとアイコンは、垂直方向の中央に配置する必要があります。
• いずれの場合でも、2行は同じ幅を持つ必要があります。小さい方は大きい方の幅をとります。
• メインブロックに対して1行（またはその両方）が大きすぎると、左側のテキスト（グレーの背景）が自動的に改行されます。

HTMLコード：

<div class="main-wrapper"> 
    <div class="container"> 
    <div class="content upper"> 
     <div class="right-block"><!-- This block is optionnal --> 
     <div class="icon"></div> 
     </div> 

     <div class="left-block"> 
     <div class="vertically-centered"> 
      <p> 
      Some dynamic text 
      </p> 
     </div> 
     </div> 
    </div> 

    <div class="content lower"> 
     <div class="right-block"><!-- This block is optionnal --> 
     <div class="vertically-centered"> 
      <span> 
      21,5° 
      </span> 
     </div> 
     </div> 

     <div class="left-block"> 
     <div class="vertically-centered"> 
      <p> 
      Some other dynamic text 
      </p> 
     </div> 
     </div> 
    </div> 

    </div> 
</div> 

CSSコード：

/* utilities */ 
.vertically-centered { 
    display: table; 
    height: 100%; 
    width: 100%; 
} 
.vertically-centered > * { 
    display: table-cell; 
    vertical-align: middle; 
} 

/* custom styles */ 
.container { 
    display: inline-block; 
    float: right; 
    max-width: 100%; 
} 
.content { 
    width: 100%; 
    margin: 5px 0px; 
    height: 85px; 
} 
.right-block, .left-block { 
    height: 100%; 
} 
.right-block { 
    float: right; 
    font-size: 42px; 
    margin-left: 5px; 
    background-color: lightblue; 
} 
.left-block { 
    font-size: 25px; 
    line-height: 25px; 
    overflow: hidden; 
    padding: 0 20px; 
    text-align: left; 
    background-color: lightgray; 
} 

.upper .right-block { 
    width: 85px; 
} 
.lower .right-block { 
    padding: 0 15px; 
} 
.icon { 
    position: relative; 
    top: 20%; 
    left: 20%; 
    width: 60%; 
    height: 60%; 
    background-color: orange; 
} 

私はすでに試したこと：

• .left-block divにhereのようにdisplay: inline-blockを入れますが、両方の行に同じ幅を持つ必要はありません。
• を.content divに配置します。他のブラウザでは100％の幅になり、Firefoxでは.left-blockの中に大きな右のギャップができます。
• .left-blockでwhite-space: nowrapを使用してください。助けてくれなかった。
• 浮動.left-blockのdiv（右または左）作りが、テキストは、本体容器

そして、他の多くのものではなく、すべてと互換性のある単一のもののために大きすぎる場合、それは動作しません。ブラウザ（Chrome、Firefox、Safari、IE9 +、Edge）...

私はそれが何かを変更するとは思わないが、精度：それは反応的です。

私はフレックスボックスで何かしようとしていますが... IE9 ...誰か提案がある場合。

Answer 1

私はフレキシボックスで解決策を見つけました！

私は要素の順序を維持し、まだIE9のためfloat: rightを使用できるようにflex-direction: row-reserveで.contentのdivにdisplay: flexを追加しました。

また

は、.left-blockのdivのflex: autoプロパティは注意を（できるだけ多くのスペースを取ることがあります：。IE11はflex-basisがflex-growプロパティで望んでいたスペースを計算することができるように設定する必要があることですなぜ私はフレックス性質上autoの代わり0を使用。See details）

完成CSSコード

.content { 
    width: 100%; 
    margin: 5px 0px; 
    height: 85px; 
    display: flex; /* Initialize flexbox */ 
    flex-direction: row-reverse; /* keep the order of the element */ 
    border: 1px dashed gray; 
} 
.left-block { 
    font-size: 25px; 
    line-height: 25px; 
    overflow: hidden; 
    padding: 0 20px; 
    text-align: left; 
    background-color: lightgray; 
    flex: auto; /* the text blocks take all the available space */ 
} 

Here's the fiddleを修正しました。時にはIE9は1行の代わりに2行のテキストを取ることがあります（テキストはコンテナよりも2倍大きく、理由はわかりませんが）。

Answer 2

あなたは長い単語の途中で改行を許可するようにCSS word-breakプロパティを使用することができます。

.content { 
width: 100%; 
margin: 5px 0px; 
height: 85px; 
word-break: break-all; 
}