Inline divs: wrap-wrap one, скрыть переполнение на другом

Question

У меня есть интересная задача в создании двух встроенных текстовых элементов, которые ведут себя определенным образом. Вот мои параметры:

• основной текст слева будет изменяться по ширине, приблизительно от 30-60% от родительской ширины.
• дополнительный текст справа будет сильно отличаться от 20-120% от ширины родителя.
• Ширина родителя является отзывчивой и может сокращаться до 75% от ее полной ширины. Абсолютное позиционирование не будет.
• Всякий раз, когда оба элемента не подходят, я хочу ОСНОВНОЙ ТЕКСТ чтобы оставаться полностью видимыми (не многоточие) и дополнительный текст, чтобы скрыть переполнения:
  • переполнения: скрытый
  • текста переполнения: многоточие

Как CSS и HTML полностью доступны для модификации, хотя я бы предпочел, если HTML остается семантическим. Не стесняйтесь использовать JS/jQuery, если есть хороший способ сделать это.

http://jsfiddle.net/gksfwozz/1/

.outer { 
 
    width: 200px; 
 
    background-color: skyblue; 
 
    border: 3px solid skyblue; 
 
    display: flex; 
 
    justify-content: space-between; 
 
} 
 
.left { 
 
    background-color: salmon; 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
} 
 
.right { 
 
    background-color: blanchedalmond; 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
}

<div class="outer"> 
 
    <div class="left"> 
 
     MAIN TEXT 
 
    </div> 
 
    <div class="right"> 
 
     additional info sdjkfhsdf 
 
    </div> 
 
</div>

Answer 1

Я изменил свой CSS немного. здесь fiddle

для .left Я добавил float и max-width (как вы говорите, это до 60% контейнера), и я удалил переполнение: скрытый, потому что вы хотите его полностью.

.left { 
background-color: salmon; 
white-space: nowrap; 
max-width: 60%; 
float: left; 
} 

и я удаляю дисплей: flex from .outter. Я думаю, это то, что вы хотите.

Answer 2

.outer { 
 
    width: 200px; 
 
    background-color: skyblue; 
 
    border: 3px solid skyblue; 
 
    overflow:hidden; 
 
} 
 
.left { 
 
    float:left; 
 
    background-color: salmon; 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
} 
 
.right { 
 
    background-color: blanchedalmond; 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
}

What I have: 
 
<div class="outer"> 
 
    <div class="left"> 
 
     MSGDFGDFGDFDFGDFGDFGDFG 
 
    </div> 
 
    <div class="right"> 
 
     adfhdfgh 
 
    </div> 
 
</div>

http://jsfiddle.net/gksfwozz/2/

по этой ссылке How to get these two divs side-by-side?