vous pouvez définir la taille préférée de l'enfant en définissant la troisième valeur de la propriété flex à auto, comme suit:

flex: 1 0 auto;

ceci est un raccourci pour définir le flex-basis propriété .

( exemple )

comme noté dans les commentaires cependant, cela ne semble pas fonctionner dans Chrome Canary, bien que je ne suis pas sûr pourquoi.

mise à jour: ce n'est pas la réponse. Il résout le problème est différent, et c'était une étape dans la recherche de la vraie réponse. Je le garde donc pour des raisons historiques. Merci de ne pas le voter.

je crois que c'est votre réponse: http://jsfiddle.net/iamanubhavsaini/zWtBu/2 /

refer W3C

pour le premier élément

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

et pour le deuxième élément

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

sont les propriétés et les valeurs que faire l'affaire.

plus d'informations à http://www.w3.org/TR/2012/WD-css3-flexbox-20120612/#flex

---

et voici comment vous inversez l'ordre: http://jsfiddle.net/iamanubhavsaini/zWtBu/3 /

et celui-ci avec la largeur minimale prédéfinie du fond rouge-thingy: http://jsfiddle.net/iamanubhavsaini/zWtBu/1 /

pour mozilla, vous devez ajouter "min-width: 1px; "

cet exemple m'a vraiment aidé: 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;
}

mise à jour: ce n'est pas la réponse. Il résout le problème est différent, et c'était une étape dans la recherche de la vraie réponse. Je le garde donc pour des raisons historiques. Merci de ne pas le voter.

EDIT 2: Cette réponse ne résout pas le problème. Il y a une différence subtile entre la cible de la question et la réponse.

tout d'Abord, text-overflow:ellipsis travaille avec overflow:hidden . En fait, ça marche avec autre chose que overflow:visible . Ref

puis, itérer par:

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

Ici, j'ai mis overflow et max-width propriétés. max-width:60%; et overflow:hidden est ce qui fait apparaître les choses comme vous l'aviez prévu, comme hidden arrête le texte de l'affichage et 60% crée réellement la boîte de taille définie en cas de trop de données de texte.

alors, si vous êtes vraiment intéressé par modèle flex box voici comment les choses se déroulent via -webkit-order .

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

-- code --

<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>

concerned 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;
}

​-- Il n'y a pas de largeur et cela fonctionne toujours. Et c'est ce que je vois.

--après commentaire

- webkit-commande: N; est ce que nous utiliserons après 2+ ans au lieu de float:---; et beaucoup plus de hacks(si W3C reste sur ce cours et aussi si chaque fournisseur de navigateur suit)

ici, l'ordre est 1 pour la div de gauche et 2 pour la div de droite. ainsi, ils sont de Gauche à Droite.

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

même chose ici, mais seulement si vous cherchez à droite-gauche, il suffit de changer l'ordre des choses comme div>first-child { -webkit-order:2; } div>last-child{-webkit-order:1;}

NOTE: cette façon de faire -webkit-flex rend évidemment ce code inutile sur les autres moteurs. Pour, la réutilisation du code, sur les moteurs de navigateur multiples float ing doit être utilisé.

répondre à la question - après commentaire

je pense que cela répond à votre question et beaucoup d'autres à venir, Il ya d'autres façons et des solutions différentes, mais pas exactement la solution pour cette question. http://jsfiddle.net/iamanubhavsaini/vtaY8/1 / http://jsfiddle.net/iamanubhavsaini/9z3Qr/3 / http://jsfiddle.net/iamanubhavsaini/33v8g/4 / http://jsfiddle.net/iamanubhavsaini/33v8g/1/

vous devez rendre la position du conteneur: relative et la position de l'enfant: absolue.