flex布局被内容被撑开及flex布局下定宽元素被压缩

实现效果

使用flex进行左右布局，左边定宽200px，右边自适应，当右边内容过多，造成右边盒子被撑开，会造成两种问题

1. 左边定宽盒子被压缩
   解决办法：

flex-grow:0;//是否自动增长空间
flex-shrink:0;//是否自动缩小空间

2. 右边自适应的盒子被撑开
   解决办法：

flex:1;
width:0;

将右边自适应的盒子的宽度设置为 0 ，然后使用 flex：1 样式，将宽度交给 flex 布局来决定，最终子元素不会被内容撑开，达到想要的效果。