css3 flex: как ячейка может занимать точное место?

Question

Вот мой сниппет:

#container { 
 
\t display: flex; 
 
} 
 
#red { 
 
    background-color:red; 
 
} 
 
#green { 
 
    background-color:green; 
 

 
    width:100%; 
 
\t 
 
} 
 
#blue { 
 
    background-color:blue; 
 
width:100px; 
 

 
}

<div id="container"> 
 
\t <div id="red">Hello world hello world hello world</div> 
 
    <div id="green"></div> 
 
    <div id="blue"></div>  
 
</div>

Моя проблема заключается в том, что красная часть обручи в 2-х линий.

Я попытался с гибким вырастали: 1

Но красная часть занимает слишком много места!

Моя цель состоит в том, чтобы красная часть занимала столько места, сколько необходимо, без разрыва строки и без дополнительного места: содержимое красной части будет изменено с помощью JS позже.

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

красного гибкая, зеленый должен занять много места, как это возможно, синий фиксированный 100px

Answer 1

Меняйте стили с нижними стилями.

#red { 
    background-color: red; 
    width: 60%; 
} 
#green { 
    background-color: green; 
    width: 40%; 
} 

Answer 2

Вы должны указать ширину #red.

#red { 
    background-color:red; 
    width:80% 
} 
#green { 
    background-color:green; 
    width:20% 
} 

http://jsbin.com/yuhitezohi/2/