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

相关推荐
鲨莎分不晴8 分钟前
【实战】老项目焕发新生:从 Webpack 平滑迁移到 Vite 避坑全记录
前端·webpack·node.js
web小白成长日记30 分钟前
从零起步,用TypeScript写一个Todo App:踩坑与收获分享
前端·javascript·typescript
松涛和鸣32 分钟前
55、ARM与IMX6ULL入门
c语言·arm开发·数据库·单片机·sqlite·html
圣心1 小时前
Gemini 模型 介绍
前端
huangyiyi666661 小时前
前端-远程多选搜索框不能反显的问题解决
前端·javascript·vue.js·笔记·学习
敲敲了个代码1 小时前
让 Vant 弹出层适配 Uniapp Webview 返回键
前端·javascript·vue.js·学习·面试·uni-app
AOwhisky1 小时前
Ansible管理变量和事实(管理变量部分) & 部署文件到受管主机
前端·chrome·ansible
Web项目开发1 小时前
静态企业 官网 html 模板,复制粘贴即可使用,适合快速搭建
css·html·css3
摘星编程1 小时前
React Native for OpenHarmony 实战:Accessibility 辅助功能详解
javascript·react native·react.js
小二·2 小时前
Python Web 开发进阶实战:绿色软件工程 —— 构建低能耗、低碳排的可持续应用
开发语言·前端·python