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

相关推荐
小呆i8 分钟前
零基础搭建前端开发环境(详细版)
前端
icebreaker10 分钟前
Mokup:构建工具友好的可视化 Mock 工具
前端·javascript·后端
昵称老重复12 分钟前
前端如何实现两次跳转dp链接
前端
禾叙_27 分钟前
【netty】Channel
开发语言·javascript·ecmascript
不想秃头的程序员30 分钟前
Vue3 子传父全解析:从基础用法到实战避坑
前端·vue.js·面试
weixin1997010801634 分钟前
海外淘宝商品详情页前端性能优化实战
大数据·前端·python
小龙1 小时前
【开源项目】航空订票系统(界面 + 数据库 + 运行手册)开源说明
前端·航空订票系统
简单Janeee1 小时前
[Vue 3 从零到上线]-第三篇:网页的指挥官——指令系统 (v-if, v-for, v-bind, v-on)
前端·javascript·vue.js
李元_霸1 小时前
前端监控实践
前端·性能优化
星火开发设计1 小时前
虚析构函数:解决子类对象的内存泄漏
java·开发语言·前端·c++·学习·算法·知识