在使用Flex或Grid布局时,经常会遇到内容溢出容器或者将容器撑大的情况
例如在grid布局中元素尺寸为1fr,或者flex布局中元素flex-grow:1时,想使用Echarts画图和布局中的文本省略显示时发现并没有达到预期的效果,容器被内容撑大了
想要解决这个问题,首先需要知道容器为什么会被撑大。
我们知道块级元素默认宽度为容器的100%,除了自动得来的宽度之外,控制宽度的属性有width、min-width、max-width,实际操作会发现设置width也并不能解决我们说到的问题,这就关系到CSS中宽度属性的优先级:
min-width
属性为给定元素设置最小宽度。它可以阻止width
属性的应用值小于min-width
的值。
上面是MDN文档中对min-wdith的解释,可以看到设置宽度的属性当中min-width才是优先级最高的(更准确的说是min-width大于width和max-width时会覆盖width和max-width),也就是说我们设置width没起作