вы можете установить предпочтительный размер ребенка, установив третье значение flex свойство авто, например:

flex: 1 0 auto;

Это стенография для установки flex-basisсвойства.

(пример)

как отмечалось в комментариях, однако, это, кажется, не работает в Chrome Canary, хотя я не уверен, почему.

Update: это не ответ. Это решает разные проблемы, и это был шаг в поиске реального ответа. Поэтому я сохраняю его по историческим причинам. Пожалуйста, не голосуйте за него.

Я считаю, что это ваш ответ: http://jsfiddle.net/iamanubhavsaini/zWtBu/2/

см. W3C

первый элемент

-webkit-flex: 0 1 auto; /* important to note */

и для второго элемента

-webkit-flex:1 0 auto; /* important to note */

- это свойства и значения, которые делают трюк.

подробнее на http://www.w3.org/TR/2012/WD-css3-flexbox-20120612/#flex

---

и вот как вы меняете порядок:http://jsfiddle.net/iamanubhavsaini/zWtBu/3/

и этот с предопределенной минимальной шириной Красной фоновой вещи:http://jsfiddle.net/iamanubhavsaini/zWtBu/1/

для mozilla вы должны добавить " min-width: 1px;"

этот пример действительно помог мне:http://jsfiddle.net/laukstein/LLNsV/

container {
    display: -webkit-flex;
    -webkit-flex-direction: row;
    padding: 0;
    white-space: nowrap;
}

.container>div {
    overflow: hidden;
    display: inline-block;
    -webkit-flex: 1;
    min-width: 0;
    text-overflow: ellipsis;
    -moz-box-sizing: border-box;
         box-sizing: border-box;
}

Update: это не ответ. Это решает разные проблемы, и это был шаг в поиске реального ответа. Поэтому я сохраняю его по историческим причинам. Пожалуйста, не голосуйте за него.

EDIT 2: Этот ответ не решает проблему. Существует тонкая разница между целью вопроса и ответом.

прежде всего,text-overflow:ellipsis работает с overflow:hidden. На самом деле, он работает с чем угодно, кроме overflow:visible . Ref

затем, повторите:

http://jsfiddle.net/iamanubhavsaini/QCLjt/8/

вот, я поставил overflow и max-width свойства. max-width:60%; и overflow:hidden это то, что заставляет вещи выглядеть так, как вы намеревались, как hidden останавливает отображение текста и 60% фактически создает поле определенного размера в случае слишком большого количества текстовых данных.

тогда, если вы действительно заинтересованы в flex box model вот как все складывается через -webkit-order.

http://jsfiddle.net/iamanubhavsaini/QCLjt/9/

--код--

<div class="container">
    <div>foo barfoo bar</div>
    <div>foo bar</div>
</div>

<div class="container">
        <div>foo barfoo barfoo barfoo barfoo barfoo barfoo bar
        foo barfoo barfoo barfoo barfoo barfoo barfoo bar
        foo barfoo barfoo barfoo barfoo barfoo barfoo bar</div>
    <div>foo bar</div>
</div>

обеспокоенный CSS

.container {
    display: -webkit-flex;
}

div {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow:hidden;
}
.container>div:first-child{
   -webkit-order:1;
        -webkit-flex: 1;
}
.container > div:last-child {
    -webkit-flex: 1;
    -webkit-order:2;
    background: red;
}

​-- Нет ширины и до сих пор работает. И вот что я вижу.

--после комментария

- webkit-order: N; - это то, что мы будем использовать после 2-х лет вместо float:---; и многие другие хаки(если W3C остается на этом конечно, а также если каждый поставщик браузера следовать)

здесь, заказ 1 для левого div и 2 для правого div. таким образом, они находятся слева-справа.

http://jsfiddle.net/iamanubhavsaini/QCLjt/10/

то же самое здесь, но только если вы ищете справа налево, просто измените порядок вещей, как div>first-child { -webkit-order:2; } div>last-child{-webkit-order:1;}

Примечание: этот -webkit-flex способ делать вещи, очевидно, делает этот код бесполезным на других двигателях. Для повторного использования код, на нескольких движках браузера floating следует использовать.

ниже приведены некоторые примеры JS; это не отвечает на вопрос -после комментария

я думаю, что это ответ на ваш вопрос и многое другое, чтобы прийти, есть некоторые другие способы и различные решения, но не совсем решение для этого вопрос. http://jsfiddle.net/iamanubhavsaini/vtaY8/1/ http://jsfiddle.net/iamanubhavsaini/9z3Qr/3/ http://jsfiddle.net/iamanubhavsaini/33v8g/4/ http://jsfiddle.net/iamanubhavsaini/33v8g/1/

вы должны сделать положение контейнера: относительное и дочернее положение: абсолютное.