css - flex layout, display:flex, and display:-webkit-box differences

Question

https://jsfiddle.net/channg/j...

1. Why does the width of display:flex using box change?

2. After changing flex:-webkit-box, will the subsequent boxes be pushed out?

Answer 1

stackoverflow docker 1

stackoverflow docker 2

display: box; 2009 version of flex
display: flexbox; 2011 version of flex
display: flex; current version

Due to version issues, you cannot simply change
display: flex to display: -webkit-box

You also need to change flex-grow: 1 to -webkit-box-flex: 1