CSS：最初のdivをコンテナの外に出すのではなく、コンテナの外に出す（最初のコンテナの後に2番目のコンテナを表示する）

Question

私は同様の質問をここで尋ねました：CSS: How to shrink first div in container instead of going outside of containerですが、 3コンテナに必要なスペースよりも短くすることができます。このような状況が発生した場合、最初のコンテナを縮小するだけでなく、最初のコンテナの後に2番目のコンテナを表示する必要があります。ここで期待される結果： "最初のdivのコン... 2番目のdivのコンテンツ3番目のdivのコンテンツ"。現代のすべてのブラウザに対応できる方法はありますか？ （最新のChrome、Firefox、IE 11が必要）。 「https://plnkr.co/edit/9FGmNOHYxjtsQMUpeVfm?p=preview」の例からここにHTMLコード：によって記載されているようにフレキシボックスがソリューションであるかのように

<div class="container"> 
    <div class="first">First div content</div> 
    <div class="second">Second div content</div> 
    <div class="third">Third div content</div> 
</div> 

Answer 1

それは本当に明確ではないのですが、あなたが一人でこの質問からではなく、他の質問の詳細からを求めている、それはまだいるようですオリオール

.container { 
 
    background-color: gray; 
 
    display: flex; 
 
    overflow-x: hidden; 
 
    white-space: nowrap; 
 
    justify-content: space-between; 
 
} 
 
.first { 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
    padding-right: 1em; 
 
    border: 1px solid red; 
 
} 
 
.third { 
 
    flex: 1; 
 
    text-align: right; 
 
    background:pink; 
 
}

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

JSfiddle Demo