您还必须为flex-basis指定一个值（不指定此属性会导致与使用初始值auto类似的行为）。
将flex-basis: 0;添加到两个子元素中，或者使用简写设置它：

.flex-item {
    flex: 1; /* flex-basis is 0 if omitted */
}
.big {
    flex-grow: 3;
}

http://codepen.io/anon/pen/JEcBa

Flex-grow通常被误解为这种方式。Flex-grow只控制剩余的空间如何在Flex项目之间分配，而不是它们之间的比例有多大。
你要找的其实就是这个

.flex-item {
  width: 25%;
  list-style-type:none;
  border:1px solid black;
}
.big {
  width: 75%;
}

另见

• Flex-grow not working as expected (flex items don't have the widths I expect)
• In what circumstances is flex-shrink applied to flex elements and how does it work?

作者被鼓励使用flex简写来控制灵活性，而不是直接使用flex-grow，因为简写可以正确地重置任何未指定的组件以适应常见用途。
https://drafts.csswg.org/css-flexbox/#propdef-flex-grow

.flex-item {
   flex: 1;
}
.big {
   flex: 3;
}

这是一个工作示例
http://codepen.io/anon/pen/VjZYPV

相关的东西：* * 秩序很重要。**例如：
联系我们

<div class="container">
    <div class="el el-1">One</div>
    <div class="el el-2">two</div>
    <div class="el el-3">three</div>
    <div class="el el-4">four</div>
    <div class="el el-5">five</div>
    <div class="el el-6">six</div>
    <div class="el el-7">seven</div>
    <div class="el el-8">eight</div>
 </div>

css：

.container {
     display: flex;
 }

以下样式工作：

.el {
    flex-grow: 1;
 }

 .el-4 {
    flex-grow: 3;
 }

但是如果你改变顺序，它将不工作：😲

.el-4 {
    flex-grow: 3;
 }

 .el {
    flex-grow: 1;
 }