flex溢出问题

原文链接：https://juejin.im/post/5de6379f6fb9a015fd699b41

  总结：flex: 1 其实是flex-grow, flex-shrink, flex-basis的缩写
        对应的值是：flex-grow: 1, flex-shrink: 1, flex-basis: 0%
        flex-grow: 扩展，子元素宽度之和小于父元素宽度 那么子元素就会分配父元素剩余的宽度
        flex-shrink: 收缩, 子元素宽度之和大于父元素宽度 那么子元素就会按照比列收缩
        flex-basis: 是弹性盒子的基准值，在没有设置宽度的情况下宽度由content决定，如果content内容过长就会溢出外层容器，如果设置一个宽度，只要这个宽度小于外层容器的剩余宽度(一般设置为0，这样就可以保证百分之百小于剩余宽度) flex-grow就会起作用 自动分配剩余宽度，这样就可以保证flex-basis的宽度是外层容器的宽度而不是content的宽度，内容也就不会溢出