最初のdivを2番目のdivの幅に基づいてオーバーフローさせます

Question

2つのdiv要素が並んで座っています。私は、左divが右divの幅の残りのスペースを取るようにします。

.text { 
 
    display: inline; 
 
    text-overflow: ellipsis; 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
    background-color: red; 
 
} 
 

 
.icon { 
 
    display: inline-block; 
 
    width: 92px; 
 
    background-color: green; 
 
} 
 

 
.information { 
 
    width: 200px; 
 
}

<div class="information"> 
 
    <div class="text">Text Here</div> 
 
    <div class="icon">Image Here</div> 
 
</div>

私が試したすべては、テキストから左の残りのスペースに基づいて/オーバーフローのサイズを変更するアイコンのdivの原因となります。

しかし、アイコンdivの幅がもっと大きければ、テキストdivをオーバーフローさせたいです。これを行うためにとにかくありますか？

アイコンdivの幅が変わる可能性があるため、幅（lessまたはcalc（totalWidth - iconWidth）を使用） を設定できません。その値が何であるか分かりませんアイコンの幅はmixinで計算されます）。

フィドルリンク：私は予想通り、親のhttps://jsfiddle.net/fdur0wd1/

Answer 1

使用flex、および（略しまたはflex: 1 0 0）flex-grow: 1から.textを設定するには、

.text { 
 
    text-overflow: ellipsis; 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
    background-color: red; 
 
    flex: 1 0 0; 
 
} 
 

 
.icon { 
 
    width: 92px; 
 
    background-color: green; 
 
} 
 

 
.information { 
 
    width: 200px; 
 
    display: flex; 
 
}

<div class="information"> 
 
    <div class="text">Text Here</div> 
 
    <div class="icon">Image Here</div> 
 
</div>