CSS：1行に2つのdivがあり、動的（左）と固定（右）幅です。

Question

私は2つのdivがあるので、同じ行に表示する必要があります。

divは動的な幅で、ユーザーが入力したテキストです。

Div 2は日付で、右側に配置されます。

十分な幅（携帯電話）がないときに、画面の幅に合わないユーザー入力のテキストをオーバーフローさせたいとします。それだけでいくつかの時点までのテキストをオーバーフローするよう

私は次のことを試みたが、max-widthは、ここで働いていません。

.parent { 
 
    display: table; 
 
    width: 100%; 
 
} 
 

 
.dynamic { 
 
    display: inline-block; 
 
    max-width: 80%; 
 
} 
 

 
.fixed { 
 
    display: table-cell; 
 
    width: 75px; 
 
} 
 

 
.cutting-text { 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
    white-space: nowrap; 
 
}

<div class="parent"> 
 
<div class="dynamic cutting-text"> 
 
could be very long text. overflows till max-width reached, so doesn't work for small screens 
 
</div> 
 
<div class="fixed"> 
 
30.11.16 
 
</div> 
 
</div>

任意のテキストのためにこれを達成するためにどのように？

JSFiddle as well

Answer 1

使用CSSフレキシボックス。フレックスボックスで実装するのはかなり簡単です。 .parentをフレックスコンテナにして、flexプロパティを.dynamic { flex: 1; }に適用します。すべてが自動的に所定の場所に配置されます。

.parent { 
 
    display: flex; 
 
    width: 100%; 
 
} 
 

 
.dynamic { 
 
    flex: 1; 
 
} 
 

 
.cutting-text { 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
    white-space: nowrap; 
 
}

<div class="parent"> 
 
<div class="dynamic cutting-text"> 
 
could be very long text. overflows till max-width reached, so doesn't work for small screens 
 
</div> 
 
<div class="fixed"> 
 
30.11.16 
 
</div> 
 
</div>

・ホープ、このことができます：

は、以下のスニペットを見てください！

Answer 2

Updated Fiddle

変更点を見てみましょう：

.fixed { 
    width: 70px; 
    right: 0; 
    position: absolute; 
} 

.cutting-text { 
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: nowrap; 
    width: 100%; 
} 

.dynamic { 
    max-width: 80%; 
} 

.parent { 
    display: flex; 
    width: 100%; 
}