【兼容性】flex:1宽度溢出;flex,width 兼容低版本火狐

css 复制代码
.codeBox {
    padding: 0 20px;
    -moz-box-flex: 1; 
    flex: 1;
    width: 0;
    min-width: 0;
 }

这段代码,包含了我之前解决的两个问题。

一是:设置 flex:1,目的是想要 .codeBox 占满元素的剩余空间(这里是宽度)。但是当元素内容过宽,会挤压旁边元素。

解决方案:width:0

二是:flex:1,width:0,在低版本的Firefox浏览器不生效。

解决方案:-moz-box-flex:1; min-width:0

相关推荐
spionbo8 分钟前
Vue 表情包输入组件实现代码及完整开发流程解析
前端·javascript·面试
全宝9 分钟前
✏️Canvas实现环形文字
前端·javascript·canvas
lyc2333339 分钟前
鸿蒙Core File Kit:极简文件管理指南📁
前端
我这里是好的呀9 分钟前
全栈开发个人博客12.嵌套评论设计
前端·全栈
我这里是好的呀11 分钟前
全栈开发个人博客13.AI聊天设计
前端·全栈
金金金__11 分钟前
Element-Plus:popconfirm与tooltip一起使用不生效?
前端·vue.js·element
lyc23333312 分钟前
小L带你看鸿蒙应用升级的数据迁移适配📱
前端
用户268128510666918 分钟前
react-pdf(pdfjs-dist)如何兼容老浏览器(chrome 49)
前端
阿怼丶18 分钟前
🚀 如何在内网中运行 Cesium?基于 NestJS 构建离线地形与影像服务
前端·gis