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

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

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

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

 

右边自适应的盒子被撑开

解决办法：

flex:1;
width:0;

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

 

————————————————
版权声明：本文为CSDN博主「ʚ梅梅ɞ」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/meimeib/article/details/118931705