在使用Flex或Grid布局时，经常会遇到内容溢出容器或者将容器撑大的情况
例如在grid布局中元素尺寸为1fr，或者flex布局中元素flex-grow:1时，想使用Echarts画图和布局中的文本省略显示时发现并没有达到预期的效果，容器被内容撑大了
想要解决这个问题，首先需要知道容器为什么会被撑大。
我们知道块级元素默认宽度为容器的100%，除了自动得来的宽度之外，控制宽度的属性有width、min-width、max-width，实际操作会发现设置width也并不能解决我们说到的问题，这就关系到CSS中宽度属性的优先级：
min-width 属性为给定元素设置最小宽度。它可以阻止 width 属性的应用值小于 min-width 的值。
min-width 的值会同时覆盖 max-width 和 width。
上面是MDN文档中对min-wdith的解释，可以看到设置宽度的属性当中min-width才是优先级最高的（更准确的说是min-width大于width和max-width时会覆盖width和max-width），也就是说我们设置width没起作用是因为width的值被min-width覆盖了。
了解这点之后，我们自然会想到那当前min-width的值是什么？继续查看文档可以看到：
auto
用于弹性元素的默认最小宽度。相比其他布局中以0为默认值，auto能为弹性布局指明更合理的默认表现。
在弹性元素中，min-width默认为auto，也就是内容所需要的宽度，所以弹性盒子自然被撑大了。
所以该类问题的解决方案便是：重设min-width = 0（或任何小于width的值），让width属性重新拿到元素宽度的控制权，因为width属性默认为内容区域的宽度，所以会自适应弹性盒子宽度，不会撑开容器。
高度也是同理，使用min-height:0解决
标签：容器,元素,Flex,min,width,宽度,属性 来源： https://www.cnblogs.com/nayek/p/16398311.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。