为什么我的Flexbox无法正常工作？

Question

我有三个连续的div。第一个应该是固定的，第二个应该展开，直到达到“最大宽度”，第三个div应该占用剩余的空间。它正常工作，直到第三个div有文本达到整个宽度。而不是文本只是包装它开始使第二个div更小。

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

你可以找到一个jsfiddle here。

Answer 1

你可以试试下面的代码：

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

如果你想一个div采取与flexbox剩余空间，你可以应该在div flex: 1，并给其他的div指定宽度。否则，divs将不会占用剩余的空间。

Answer 2

您可以尝试在第三div加入flex-grow: 1：

#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. 的#one DIV应该有弹性收缩：0，没有弯曲生长。
2. 的#two应具有柔性收缩：0和柔性长：1
3. 的#three应该没有收缩/成长特性