CSS: два divs в одной строке, динамическая (левая) и фиксированная (правая) ширина. make overflow text on dynamic div

Question

У меня есть два div, они должны отображаться на одной строке.

Div one - динамическая ширина, пользователь вводит текст.

Div two - дата, которая расположена на правой стороне.

Когда не хватает ширины (мобильного телефона), я хочу, чтобы пользователь напечатал текст, который не соответствует ширине экрана, который должен быть переполнен.

Я попытался следующие, но 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 Flexbox. Его довольно легко реализовать в flexbox. Сделайте свой контейнер .parent гибким и примените свойства гибкости до .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%; 
}