Три гибких пролета в контейнере с одним переполнением текста

Question

В настоящее время я пытаюсь получить сценарий, работающий в CSS, который помещает три текста рядом друг с другом без переноса. Если первый текст слишком длинный, его нужно усечь. См. Рисунок ниже для более подробного объяснения.

Что я пробовал до сих пор:

• позиционирование текстов в строке с помощью float
• позиционирование текста в строке с помощью flexbox
• позиционирование текста в строке с использованием дисплея: ячейка таблицы

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

У кого-нибудь есть идея добиться гибкой компоновки, как показано ниже?
Случай 1 (любая альтернатива) и случай 2 должны быть возможны без знания ширины текста.

Answer 1

Вот, пожалуйста:

 <div class="parent">
     <span class="third">
         Short
     </span>
     <span class="first">
         Short
     </span>
     <span class="second">
         Short
     </span>
 </div>

 <div class="parent">
     <span class="third">
         Short
     </span>
     <span class="first">
         LongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLong
     </span>
     <span class="second">
         Short
     </span>
 </div>

 <div class="parent">
     <span class="third">
         LongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLong
     </span>
     <span class="first">
         LongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLong
     </span>
     <span class="second">
         LongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLong
     </span>
 </div>

в стиле:

 .parent{
     margin:10px;
     width: 400px;
     background-color:grey;
 }

 .parent span {
     overflow:hidden;
 }

 .first {
     text-overflow: ellipsis;
     background-color:green;
     min-widh: 20%;
     float:left;
     max-width: 60%;
     display: inline-block;
 }

 .second {
     background-color:red;
     width: 20%;
     display: inline-block;
 }

 .third {
     float:right;
     background-color:yellow;
     width: 20%;
     display: inline-block;
 }

Вы можете посмотреть, как это выглядит здесь: http://jsfiddle.net/ramsesoriginal/utSgC/

Я выбрал ширину в процентах, так как она позволяет просто установить ширину родительского элемента, а остальные адаптируются.

Третий пример - это то, как он отреагирует, когда второй и третий станут очень длинными ...