Warum funktioniert meine Flexbox nicht richtig?

Question

Ich habe drei divs in einer Reihe. Der erste sollte ein fester Wert sein, der zweite sollte expandieren, bis er eine "maximale Breite" erreicht, und der dritte Teil sollte den verbleibenden Platz einnehmen. Es funktioniert korrekt, bis das dritte Div Text hat, der die gesamte Breite erreicht. Anstatt den Text einfach zu umbrechen, beginnt er, das zweite div kleiner zu machen.

<div id="container"> 
    <div id="one"> 
    sdfsdf 
    </div> 
    <div id="two"> 
    fghfgh fghfghd sdf sdf sdf ssdf sdf gh 
    </div> 
    <div id="three"> 
    sdfsdfsdfsdfsfd sdf sdf sdf sdf sdfwef sdfwefs df 
    </div> 
</div> 

#container{ 
    background-color: red; 
    display: flex; 
    height: 100px; 
    width: 400px; 
} 

#one{ 
    background-color: blue; 
    flex-grow: 1; 
    width:60px; 
} 
#two{ 
    background-color: red; 
    max-width: 100px 
} 
#three{ 
    background-color: green; 
    flex-grow: 1; 
} 

können Sie einen jsfiddle here finden.

Answer 1

Sie können den folgenden Code versuchen:

#container { 
    background-color: red; 
    display: flex; 
    height: 100px; 
    width: 400px; 
} 

#one { 
    background-color: blue; 
    width:60px; 
} 

#two { 
    background-color: red; 
    max-width: 100px 
} 

#three { 
    background-color: green; 
    flex: 1; 
} 

Wenn Sie ein div nehmen wollen verbleibende Raum mit flexbox, können Sie sollten die div flex: 1 und die anderen divs angegebene Breite geben. Andernfalls werden die divs den verbleibenden Speicherplatz nicht übernehmen.

Answer 2

können Sie versuchen, flex-grow: 1 im dritten div Zugabe:

#container { 
    display: flex; 
    height: 100px; 
    width: 400px; 
} 

#one, 
#two, 
#three { 
    flex-grow: 1; 
} 

#one { 
    background-color: blue; 
} 

#container, 
#two { 
    background-color: red; 
} 

#three { 
    background-color: green; 
} 

Answer 3

1. Die #ONE div sollte flex-schrumpfen: 0 und keine flex-wachsen.
2. Die #TWO sollte flex-schrumpfen: 0 und Flex wachsen: 1
3. Die #three sollte keine Schrumpf haben/wachsen Eigenschaften