Flex布局中固定宽度与flex:1导致的溢出

最新推荐文章于 2026-06-23 23:18:49 发布

原创最新推荐文章于 2026-06-23 23:18:49 发布 · 240 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#css

收录于

在开发中经常遇到父盒子用flex布局，一边固定宽度，另外一边用flex:1，因为另一边内容太多导致溢出的问题，这个时候只需要简单一个属性即可解决，在flex:1的元素上增加min-width: 0;或者width: 0;即可

之前的文章也有提到原因可以参照，下面是引用地址有兴趣的可以看看

原生小程序，左边不定宽，右边滑动（scroll-view）

.info {
    flex: 1;
    min-width: 0;
}

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Yannnnnm

关注关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

flex 布局左边盒子flex:1 右边盒子固定宽度被推出屏幕右侧

树上骑个猴的博客

03-21

2788

页面左右布局，左边盒子设置flex:1，左边盒子里的内容是el-table。右边盒子设定固定宽度，当左边盒子里的el-table每次在页码1和页码2之间切换的时候(我的el-table一共是2页，第二页数据少不会出现垂直滚动条，第一页数据多会出现垂直滚动条)，el-table右侧滚动条的出现和消失导致左边el-table的宽度越来越大，所以左边盒子宽度越来越大。导致右边的盒子被推出屏幕右侧边界。原因：如果左边盒子不设置宽度，左边盒子可以被子节点(el-table)无限撑开。解决方案：给左边盒子设置

当父级元素设置了flex 布局，两个子元素都设置了flex :1, 但是当子元素放不下的时候会溢出父元素怎么解决（css 样式问题）

m0_53001289的博客

01-15

702

遇到个样式问题，当父级元素设置了flex 布局，两个子元素都设置了flex :1, 但是当子元素放不下的时候会溢出父元素怎么解决（拖拽浏览器使页面变小）

参与评论您还未登录，请先登录后发表或查看评论

css利用flex分配剩余高度出现子组件溢出问题

HDdgut的博客

08-29

3217

是一个CSS属性，用于指定弹性容器内弹性项目的伸缩能力和分配比例。情景：父组件高度一定，子组件中，其他子组件高度固定，一个子组件高度不确定（页面滚动列表）多重嵌套的时候，父组件中也有flex:1，同样需要使用overflow属性控制溢出；当子组件的内容超出了容器的高度(父组件)时候，（推荐），或是限制子组件的最大高度。1.利用flex分配剩余高度/宽度。

flex 布局比较容易犯的错误出现边界超出的预想的情况

qq_39016177的博客

11-01

1135

flex 布局比较容易犯的错误出现边界超出的预想的情况

Flex布局下文本溢出省略号失效了，Flex自适应宽度显示省略号

smouns_的博客

05-10

4005

Flex布局下文本溢出省略号失效了，Flex自适应宽度显示省略号

css3 flex 布局宽度不生效

nian_cj的博客

04-07

3017

两列布局项目中经常会用到，很多种方法可以做这样的效果但是最方便的还是要属flex了，给外层父元素设置display:flex;然后子元素，宽度自适应的那个设置 flex-grow:1;，另外一个设置固定宽度就可以做到，一个固定另一个自适应了。具体代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta...

css:flex布局下overflow超出隐藏失效

彭世瑜的博客

04-03

2843

布局 <div class="container"> <div class="left mo-ellipsis-1"> 左边自适应，超出隐藏 <div> <div class="right"> 右边固定宽度 <div> <div> css如下 .container { display: flex; } .left { flex: 1; /* 需要设置一个宽度 */ wid

flex模式文字溢出问题

u010651696的博客

08-20

3458

方案1：问题：使用flex布局，左边自适应，右边固定左边的文字太长了，需求是显示一行，超长显示… 一般做法： text-overflow: ellipsis; overflow: hidden; white-space: nowrap; 但是这个做法的前提是固定宽度，比如width：200px 现在左边是自适应，使用的方法是父元素加上：max-width: calc(100% ...

【前端】CSS

Elena's Blog

06-23

176

作用特点标签选择器能选出所有相同标签不能差异化选择类选择器能选出一个或多个标签根据需求选择，最灵活，最常用id 选择器能选出一个标签同一个 id 在一个 HTML 中只能出现一次通配符选择器选择所有标签特殊情况下使用。

CSS 悬挂空白与选区溢出

luemeon的博客

06-16

459

在（或pre-line）模式下，浏览器被要求既要保留空格，又要自动换行。原则 A：空格必须保留（因为是pre-wrap原则 B：空格后面没有宽度了，必须换行。如果把这些行尾空格硬塞在当前行，气泡盒子就会被撑大；如果把它们带到下一行开头，下一行的文本又会无故缩进（这通常不是用户想要的）。这些行尾的空白字符不消失，而是“悬挂”在行末的边界之外。它们存在于这一行，但被当作“零零兵”，不占用整行盒子的实际布局宽度（Advance Width）。

04_CSS及案例开发

人生得意须尽欢

06-17

344

本文摘要介绍了网页布局的核心概念和CSS盒子模型的应用要点。主要内容包括：1）盒子模型的基本用法，重点讲解内边距(padding)的四种设置方式及其对布局的影响；2）外边距(margin)的概念及其在调整元素位置时的作用；3）块元素与行内元素的区别及转换方法；4）浮动和定位技术的应用场景与实际案例开发。学习目标要求掌握盒子模型居中设置、元素类型转换、浮动布局实现、定位技术等核心技能，并通过案例练习巩固这些布局技术在实际网页开发中的应用。课程强调通过div标签划分网页结构，使用边距属性精细控制元素位置，为后续

vue学习第一阶段扩展：关于原子化CSS，DevTools插件以及小练习

2303_80072254的博客

06-17

285

* 每个组件写自己的样式文件 */直接用预定义的 class 名组合，不写自定义 CSS。-- 不用写 CSS，直接用 class 名表达样式 --> < div class = " bg-white rounded-lg p-4 " > < h1 class = " text-lg font-bold " > 标题 </ h1 > </ div >

前端入门精讲｜18个CSS高频进阶知识

2602_95057108的博客

06-21

237

承接上一篇CSS基础核心知识点，本篇继续深挖CSS进阶高频考点，涵盖布局适配、样式初始化、文本溢出、文档流、盒模型、属性继承、宽度适配等重难点内容。这些知识点是解决页面布局错乱、适配bug、样式兼容问题的核心，也是期末考试、前端入门面试的高频考题。全文搭配原理解析、区别对比、实战代码、踩坑总结，细节拉满，轻松拿下高分。在网页开发中，底部导航、版权信息、悬浮按钮等模块，需要永久固定在页面底部，不受页面滚动影响，最优解决方案为fixed固定定位组合样式。八、元素固定在网页底部的实现方案。

【CSS学习第七篇】

最新发布

2301_77399671的博客

06-23

120

CSS学习第七篇

初级打字母练习游戏，让学习有点乐趣

shisongyuan的专栏

06-22

598

给自己家孩子编写的分享出来，希望你帮助给多孩子完成高考后，熟悉电脑。

CSS 3D 硬核解析：四个属性手写旋转立方体

2503_93701293的博客

06-16

335

本文纯 CSS 实现 3D 旋转立方体，拆解 perspective、transform-style、transform、animation 四大核心属性，理清透视、3D 空间、变换执行顺序与动画要点，附完整可运行代码，同时讲解 GPU 渲染优化技巧，零基础也能吃透 CSS 3D 原理。

05_CSS制作简易12306网页

人生得意须尽欢

06-23

195

本文介绍了12306网站导航栏和服务栏等的HTML/CSS实现方法。

Cesium CSS 元素教程

2201_75964656的博客

06-21

223

详解 Cesium.js CSS 元素：基于 WebGL 实现「CSS 元素」可视化效果，附完整可运行源码，涵盖 Cesium 等关键实现，附完整源码与在线 Demo，适合 Cesium 基础学习与二次开发。

使用HTML写一个悬浮摄像头，可拖拽、放大、缩小

weixin_52803316的博客

06-13

848

这段代码实现了一个可拖拽、可调整大小的悬浮摄像头窗口。主要功能包括：1) 通过浏览器API调用用户摄像头并显示实时画面；2) 窗口可自由拖动位置；3) 提供8个方向的调整手柄，支持窗口大小调整并设置最小尺寸限制（160×120px）；4) 采用固定定位，始终悬浮在其他页面内容之上。界面为黑色圆角矩形，带有阴影效果，光标会根据操作区域自动变化形状，提供直观的交互体验。

vue实现三角抽象思维计算矩形面积

cf8833的博客

06-20

300

这篇文章摘要： Vue组件实现了一个可交互的直角三角形与内嵌矩形绘图工具。用户可通过控件调整直角三角形的两条直角边长度(AB和AC)以及内嵌矩形的宽度和高度比例。组件实时计算并显示三角形面积、矩形面积及其占比、斜边长度等几何数据。绘图功能使用Canvas API实现，包含网格背景、三角形和矩形的绘制、顶点标注和尺寸标注。关键特性包括：响应式数据绑定、实时图形更新、面积计算和百分比显示。当矩形顶点F位于斜边BC上时，满足宽度比例+高度比例=1的关系。