發現

????????父元素設置overflow: overlay; 或 overflow: scroll; 或 overflow: auto; 如果子元素超出父元素內容，父元素會被子元素超出部分撐大至子元素同樣大小。

代碼：

?

?默認效果：

?給父元素設置overflow: overlay; 或 overflow: scroll; 或 overflow: auto; ：

（三者效果除了scroll包含上下滑塊，在這里使用表達意思一致，選其一使用overlay）

效果

?

總結

????????可以看出，父元素設置?overflow: overlay;?屬性后，子元素超出的部分以滑塊的形式包裹住了，但是父元素卻被撐開了，使用F12開發者模式觀察下，顯示父元素的寬高還是200px * 200px，沒有變化，再對比上動圖滑動的效果發現：父元素只是被撐開了，但是實際的大小還是原來的大小，只是樣子上被撐大成了子元素同樣的尺寸，通過父元素里面的文本排列也可以看出，雖然寬看著變長了，但是文本內容排列還是按照原來 200px 來的。

? ? ? ? 只能說，這算是一個特性吧，目前在實際使用中還沒有看到此特性帶來的負面影響

?

?

總結

以上是生活随笔為你收集整理的父元素设置overflow: overlay； 或 overflow: scroll； 或 overflow: auto； 如果子元素超出父元素内容，父元素会被子元素超出部分撑大至子元素同样大小的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。