CSS：コンテナの外に出るのではなく、最初のdivを縮小する方法

Question

コンテナの幅を変更することができます。両方のコンテナに必要なスペースよりも短くすることができます。私が必要とするのは、そのような状況が起こった場合、最初の容器を縮小することですここに期待される結果： "最初のdivのcon ... 2番目のdivの内容"。現代のすべてのブラウザに対応できる方法はありますか？ （最新のChrome、Firefox、IE 11が必要）。例から ここでhtmlコード "https://plnkr.co/edit/rH3ABKvFRltvAL1rXqkr?p=preview"：

<div class="container"> 
    <div class="first">first div content</div> 
    <div class="second">second div content</div> 
</div> 

Answer 1

あなたはフレキシボックスを使用することができます

.container { 
 
    background-color: gray; 
 
    display: flex; 
 
    justify-content: space-between; 
 
    overflow-x: hidden; 
 
    white-space: nowrap 
 
} 
 
.first { 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
}

<div class="container"> 
 
    <div class="first">first div content</div> 
 
    <div class="second">second div content</div> 
 
</div>