flex字元素固定宽度被压缩，flex为1的宽度超出父元素的问题

原创已于 2025-10-21 15:07:28 修改 · 139 阅读

0 ·

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

GEO检测

标签

#前端 #css

收录于

于 2025-09-03 10:25:46 首次发布

给子元素固定宽度的盒子比如宽度为300px加上

width:300px;
flex-shrink: 0;

flex为1的盒子加上

flex: 1;
width：0；

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

大力99

关注关注

2
点赞
踩
0

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

flex布局中子元素宽度超出父元素导致样式问题

Dj19983160703的博客

06-27

1万+

近段时间，由于公司工作安排，一直没有时间更新博客，今天在写页面的时候，遇到了一些问题，做一下记录，话不多说开始。在现在的前端样式开发中，相信大家已经对flex布局不陌生了吧，在页面布局中，所谓方便快捷，但是在开发中，我遇到一个问题：就是在一个设置了 flex:1 的容器中，如果文字很长，这时候文字就会超出容器，而不是呆在设置好的动态剩余的空间中。由于实际项目的比较复杂，不好拿出来说，这里就把问题简化描述如下：界面代码小程序 css：使用的ui框架中的样式，设置不得换行，...

【HTML中flex属性】设置flex属性时子元素宽度超出父元素

qq_33539213的博客

09-29

1万+

场景：元素分为左右两块，左边元素定宽，右边元素自动充满屏幕。设置右边元素flex：1，当右边元素宽度超过父元素时，会造成右边宽度溢出。原样式： .left { width: 240px; } .right { flex: 1; } 右边多设置一个width:0或overflow:hiddlen后样式正常。 .left { width...

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

解决flex布局内容超出盒子宽度问题

小漠007的专栏

12-08

8043

方案1：子项目设置flex:1;overflow:hidden; 子项目内容设置超出省略号，可以完整显示三个省略号子项目内容宽度等于子项目在线预览 #main { width: 350px; height: 100px; border: 1px solid #c3c3c3; display: flex; } #main div:nth-of-type(1) {flex:1;overflow:hidden;} #main div:nth-of-type(2) {flex-g

探秘Flex布局下子元素宽度超出的那些烦心事

ljgllxyz的专栏

05-07

2455

嘿，小伙伴们！你们有没有遇到过用Flex布局的时候，子元素的宽度莫名其妙地超出了父元素的情况？别着急，今天我就来给大家揭秘这个问题的来龙去脉，以及一些解决方案。让我们一起来深入探讨！

关于 flex 布局时，子元素宽度超出父元素问题及解决方案（问题）

weixin_60547084的博客

03-20

1万+

这个是我在项目中遇到的一个bug，使用的 flex 布局，由于我动态的修改绿色盒子的显示与隐藏，导致两边盒子的挤压。先看效果图，大家可以看一下下面的样式，很明显左边和右边的盒子我是给的定宽，但是被挤压了。很明显，红色的盒子没有300px。

完美解决：flex布局中设置宽度被压缩的问题

热门推荐

web_ding的博客

03-17

2万+

问题描述：在父级中设置了display:flex;父元素宽度不够的时候，子元素就算设置的宽度，也会被压缩；产生原因：当子元素设置固定宽度，如果整体宽度不足时，会把固定宽度给压缩解决方法: 给固定宽度的元素添加flex-shrink:0 flex-shrink:0; TIPS： flex-shrink平时在使用过程中比较少见，具体查看flex-shrink链接 ...

flex子元素固定宽度被压缩，flex为1的宽度超出父元素显示不全

aleluye的博客

07-18

686

当父元素的宽度为flex，子元素一个是。（table），变化页面宽度，会出现。固定宽度被压缩，表格宽度超出。，一个宽度自适应占据剩下的。固定宽度元素增加属性。

css中flex布局固定宽度盒子被压缩问题解决

小白的笔记

04-06

3785

css中flex布局固定宽度被压缩问题

【CSS】flex布局中子元素设置宽度失效

流萤梦的博客

02-18

9968

先来盘一盘我自己遇到的问题场景，大概如图所示：前提条件：box使用了flex布局，让div1和div2两端对齐，box未设置宽度，其宽度是自适应的，div2的宽度是固定的，div1的宽度理想状态是box的宽度减去div2的固定宽度。简单来说就是，div2固定宽度，div1宽度自适应占满剩余空间。问题现状：div1长度没超长的时候，没有问题。但当div1的内容长度超长了，div2设置的宽度失效，会被压缩。而问题的原因主要在于flex的flex-grow和flex-shrink属性。先.

flex:1 布局超出使用省略号问题

lgg1997的博客

06-28

4084

css flex 布局文字超出省略

【踩坑】input的默认宽度，导致flex:1失效

hamal_ye的博客

01-07

3892

先说说这个坑的来源需求：input输入框跟一个点击按钮并排，点击按钮的宽度固定了，input的宽度就占满剩下的位置一想到占满剩下的位置，就习惯性地想到了flex:1，然后就写了如下代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <me...

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

树上骑个猴的博客

03-21

2789

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

flex布局子元素宽度被压缩

weixin_44785498的博客

07-19

2332

flex布局子元素宽度被压缩

flex布局设置宽度被压缩

brilliantSt的博客

01-29

1935

问题描述：父元素设置为flex布局，子元素的宽度设定为固定宽度，但是子元素的宽度被压缩了。解决方式：给子元素设置 flex-shrink: 0。扩展：flex-shrink 属性指定了 flex 元素的收缩规则，默认为1，在子元素默认宽度之和大于父元素宽度时（即父盒子“装不下”子盒子）会发生收缩，指定为 0 时表示不收缩。 ...

flex横向布局超出部分滚动，使用Flexbox布局时，内容超出容器宽度时，容器内部出现横向滚动条而不是压缩子元素

u010234868的专栏

01-23

1866

上述代码中，.flex-container是包含所有.flex-item的父容器。每个.flex-item都有固定的宽度，并且不会因为容器空间不足而收缩。如果所有子项的总宽度超出了父容器的宽度，用户可以通过水平滚动来查看所有的子项。2. 为了确保父容器不会压缩子元素，需要给子元素设置flex-shrink: 0;3. 给父容器添加overflow-x: auto;属性，这样当内容超出父容器的宽度时，会显示一个水平滚动条。4. 如果不想让垂直方向也出现滚动条，可以加上overflow-y: hidden;

flex ：1，挤掉其他元素宽度怎么解决

最新发布

weixin_42508745的博客

11-26

388

核心原理是 Flex 项目的默认 min-width: auto 会阻止元素收缩到内容宽度以下，通过 min-width: 0 可以解决这个问题。主要方案：为 flex: 1 元素添加 min-width: 0，覆盖默认的 min-width: auto。明确基础尺寸：使用 flex: 1 1 0% 替代 flex: 1。问题：中间的 flex: 1 元素会挤压两侧的固定宽度元素。方案 2：使用 flex: 1 1 0% 明确基础尺寸。方案 3：为固定元素设置 flex-shrink: 0。

给父元素设置display:flex之后里面的子元素设置宽度无效的问题---给宽度无效的子元素添加flex-shrink: 0；

weixin_42017221的博客

09-30

252

因为flex容器里面的弹性元素默认是收缩的，宽度被收缩了，即默认flex-shrink:1。问题：flex布局下，子元素的合计宽度是无法超过父元素的宽度。即使单独设置也是没有用的。父元素设置了flex之后，导致内部的block布局变成了flex布局，在子元素们加起来的宽度<父元素宽度的情况下，子元素宽度是有效的，但是一旦子元素们撑破父元素，就会导致有些子元素设置宽度无效，

flex布局width设置为0，同时flex设置为1

pscool的博客

05-29

751

一个.container的div（宽度为200px，高度为200px）下，有两个直接子div（.box1和.box2），当container使用flex布局后，.box1设置为固定宽度50px，.box2设置为flex:1，占满所有剩余宽度。/* 剩余空间只有200px - 50px = 150px 了，这里设置的200px显然超出了剩余空间大小 *//* .box2设置width为0后，这个flex-shrink: 0;

flex:none 和 flex:1

weixin_43117402的博客

03-03

6926

不允许项目压缩、放大 flex: none 如果我们希望项目排在一行里，但是项目的宽度又不被压缩，那么我们应该给项目设置 flex:none，使项目不能被压缩或放大。我们接触到的属性，justify-content、align-items、flex-wrap，都是设置在 flex 容器上的。但是这个控制项目是否被压缩或放大的属性，是设置在 flex 项目上的。项目自动充满剩余空间 flex: ...

解决设置了display：flex的元素，他的子元素里面没有设置flex属性的元素页面缩放的时候宽度会被压缩的问题

qq_29705009的博客

12-03

1009

解决设置了display：flex的元素，他的子元素里面没有设置flex属性的元素页面缩放的时候宽度会被压缩的问题