BUG:在flex容器下面的一個flex:1
的子容器里面寫了個el-table
用來展示列表數據,在做寬度自適應測試的時候發現該組件的寬度只會增加不會縮小。
Debug:通過控制台發現組件生成的table
的寬度是動態計算的,翻查源碼,發現以下代碼段
也就是說,組件的resize事件是綁定在this.$el上了,這應該就是的原因所在了。
flex容器下的width:100%會一直向上繼承,直到flex容器下第一級子元素,但是當某個子元素的寬度出現固定值並且大於flex伸展的寬度的時候,那么容器就不會收縮,自然也就觸發不了resize事件了。
解決方案:可以將設置了flex屬性的容器設置position:relative,然后在子元素加多一層div包裹內容,設置position:absolute; width:100%;繼承父級寬度,那么內容也會繼承該div的寬度了。
已測試此解決方案,但是還是不太懂原理,先分享啦