html - 具有 flex-grow 的相同宽度容器不起作用

Question

我正在尝试使用 flex 创建相同宽度的 flex 元素，但它们会根据 flex 元素中的子项数量不断改变宽度

fiddle

如你所见，右边的绿色容器要小得多，尽管它们都有 flex-grow:1

我该如何解决这个问题？谢谢!

span {
    display: inline-block;
    width: 10px;
    height: 30px;
    border: 1px solid red;
}
.container {
    display: flex;
    display: -webkit-flex;
    border: 1px solid blue;
    width: 200px; 
    padding: 2px;

}
.item {
    flex-grow: 1;
    -webkit-flex-grow: 1;
    border: 1px solid green;
}

Answer 1

使用 flex:1 而不是 flex-grow:1 似乎可以解决这个问题。