欢迎访问 生活随笔！
TAG聚合

生活随笔

当前位置： 首页 > 编程资源 > 编程问答 >内容正文

编程问答

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

发布时间：2025/4/16 编程问答 1 豆豆
生活随笔 收集整理的这篇文章主要介绍了 flex布局：子子元素过大撑开了设定flex：1的子元素的解决方案 小编觉得挺不错的,现在分享给大家,帮大家做个参考.

2019独角兽企业重金招聘Python工程师标准>>>

  • 让p3脱离文旦流，不影响外层flex布局：
    • p2设置相对定位，p3设置绝对定位
  • 设置p2的overflow不为visible,构造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>

转载于:https://my.oschina.net/u/3407699/blog/1924700

总结

以上是生活随笔为你收集整理的flex布局：子子元素过大撑开了设定flex：1的子元素的解决方案的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。