Same width containers with flex-grow not working

I'm trying to use flex to create flex-items of same width, but they keep changing width depending on number of children in flex-item fiddle As you can see, the right green container is much smaller, even though both have flex-grow:1 How can I fix this? Thanks! ``` 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; } ```