【兼容性】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

相关推荐
前端一小卒42 分钟前
一个看似“送分”的需求为何翻车?——前端状态机实战指南
前端·javascript·面试
syt_10131 小时前
Object.defineProperty和Proxy实现拦截的区别
开发语言·前端·javascript
遝靑1 小时前
Flutter 跨端开发进阶:可复用自定义组件封装与多端适配实战(移动端 + Web + 桌面端)
前端·flutter
cypking1 小时前
Web前端移动端开发常见问题及解决方案(完整版)
前端
长安牧笛1 小时前
儿童屏幕时间管控学习引导系统,核心功能,绑定设备,设时长与时段,识别娱乐,APP超时锁屏,推荐益智内容,生成使用报告,学习达标解锁娱乐
javascript
老前端的功夫1 小时前
Vue 3 vs Vue 2 深度解析:从架构革新到开发体验全面升级
前端·vue.js·架构
栀秋6661 小时前
深入浅出链表操作:从Dummy节点到快慢指针的实战精要
前端·javascript·算法
狗哥哥1 小时前
Vue 3 动态菜单渲染优化实战:从白屏到“零延迟”体验
前端·vue.js
青青很轻_1 小时前
Vue自定义拖拽指令架构解析:从零到一实现元素自由拖拽
前端·javascript·vue.js
xhxxx1 小时前
从被追问到被点赞:我靠“哨兵+快慢指针”展示了面试官真正想看的代码思维
javascript·算法·面试