當(dāng)前位置：首頁(yè) > 编程资源 > 编程问答 >内容正文

编程问答

flex布局：子子元素过大撑开了设定flex：1的子元素的解决方案

發(fā)布時(shí)間：2025/4/16 编程问答 24 豆豆

生活随笔收集整理的這篇文章主要介紹了 flex布局：子子元素过大撑开了设定flex：1的子元素的解决方案小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

2019獨(dú)角獸企業(yè)重金招聘Python工程師標(biāo)準(zhǔn)>>>

讓p3脫離文旦流，不影響外層flex布局：
- p2設(shè)置相對(duì)定位，p3設(shè)置絕對(duì)定位
設(shè)置p2的overflow不為visible,構(gòu)造BFC

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <style>*{margin: 0;padding: 0;}.wrapper{display: flex;width: 1000px;height: 300px;}.p1{flex: 2;border: 1px solid red;}.p2{border: 1px solid red;flex: 1;display: block;overflow: scroll;}.p3{width: 700px;height: 200px;} </style> <body> <div class="wrapper"><div class="p1"></div><div class="p2"><div class="p3">256</div></div> </div> </body> </html>

轉(zhuǎn)載于:https://my.oschina.net/u/3407699/blog/1924700

總結(jié)

以上是生活随笔為你收集整理的flex布局：子子元素过大撑开了设定flex：1的子元素的解决方案的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇： JUKI贴片机RX-7R_JUKI贴片机
下一篇：仅仅用几行python代码偷偷复制U盘文