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

相关推荐
cypking2 分钟前
二次封装ElementUI日期范围组件:打造带限制规则的Vue2 v-model响应式通用组件
前端·javascript·elementui
A923A3 分钟前
【小兔鲜电商前台 | 项目笔记】第二天
前端·vue.js·笔记·项目·小兔鲜
牧码岛3 分钟前
Web前端之样式中的light-dark函数,从媒体查询到颜色函数,从颜色到图片,light-dark打开CSS新时代、主题切换的暗黑模式到image的正解
前端·css·web·web前端
酉鬼女又兒16 分钟前
零基础快速入门前端蓝桥杯Web考点深度解析:var、let、const与事件绑定实战(可用于备赛蓝桥杯Web应用开发)
开发语言·前端·javascript·职场和发展·蓝桥杯·es6·html5
宁雨桥27 分钟前
前端项目实现光暗主题切换的完整方案
前端
happymaker062635 分钟前
vue指令扩展以及监视器的使用
前端·javascript·vue.js
还是大剑师兰特36 分钟前
EventBus核心方法用法
javascript·vue.js·大剑师
一只小阿乐1 小时前
vue前端处理流式数据
前端·javascript·ai·大模型·全栈开发·agentai
问道飞鱼1 小时前
【技术方案】面向 Web 系统的《全栈灰度部署方案设计》
前端·全栈·灰度发布
꧁꫞꯭零꯭点꯭꫞꧂1 小时前
前端面试题3
开发语言·前端·javascript