开发随笔:flex:1被内部元素撑开问题解决办法

最新推荐文章于 2024-07-23 15:14:41 发布

月半叫做胖

最新推荐文章于 2024-07-23 15:14:41 发布

阅读量1.2w

点赞数 6

分类专栏： CSS 前端学习日常开发文章标签： css overflow flex

本文链接：https://blog.csdn.net/qq_24724109/article/details/103726815

版权

当使用flex:1的CSS属性时，如果内部元素（如文本）过长，会撑开父元素。为避免这种情况，可以给flex:1的元素添加overflow: hidden，使它的宽度固定。若需要处理文本换行，可以结合text-overflow属性，但注意应用该属性的元素宽度必须固定。

摘要由CSDN通过智能技术生成

flex:1由于内部元素被撑开的问题

问题描述

当flex:1的元素当其子元素过长(文本过长)时，会直接撑开父元素

<!---html--->
      <div class="wrapper">
        <div class="left">1</div>
        <div class="middle">

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

月半叫做胖

关注关注

6
点赞
踩
2

收藏

觉得还不错? 一键收藏
4
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

树莓派 + Home Assistant + HomeKit 从零开始打造个人智能家居系统篇三：进阶配置 Home Assistant

bencheng06的博客

07-24

4889

树莓派 + Home Assistant + HomeKit 从零开始打造个人智能家居系统篇三：进阶配置 Home Assistant 通过本篇教程，你将完成对 Home Assistant 的进一步配置，个性化设置与管理你的智能家居设备。题外话关于智能家居，我与很多人一样，因新房装修而开始关注，2014 年智能家居市场方兴未艾，还是传统智能家居厂商的天下，同年 Apple 在 WWDC 上...

父元素设置flex：1；子元素内容过程导致被撑开

Moon Star

05-08

2543

<div class="box"> <div class="a"></div> <div class="b"></div> </div> .box { display: flex;} .b { flex: 1; } .a {width: 100px;} 正常两栏布局，但如果b得子元素太宽，会撑开b，导致a的宽度被挤小将b的宽度设置为width: 0;，就可以解决 ...

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

flex:1的大坑

i-cat的博客

09-16

1335

设置flex:1不生效,高度还是会超出父元素,如何解决?

flex：1；会被子元素撑开问题

CZDBGSY的博客

07-23

386

1定高后，2自适应；直接给2flex:1;如果子元素过多，会被子元素撑开，随便加一个高度就好了。

flex：1的容器会被内部元素撑开的解决方法

weixin_42274805的博客

04-07

1333

.main { flex: 1; } 改为： .main { flex: 1; overflow: hidden; }

flex布局设置flex=1的时候宽度被内部元素撑开的问题

ddyy2695734664的博客

01-18

6073

在设置flex=1的元素上再设置个overflex：hidden即可代表在该元素内部进行计算

父元素flex:1时高度被子元素撑开的解决方法

weixin_46447553的博客

01-05

1989

父元素flex:1时高度被子元素撑开的解决方法

flex:1时，父元素宽度被子元素撑开

Zoey_J的博客

09-18

8583

当子元素设置超出不换行时，若子元素的宽度超出了父元素宽度（均分后），则会将父元素撑开，即 flex:1 失效 <div style="width: 100%; display: flex;"> <div style="background-color: orange; flex: 1;"> <p style="white-space: nowrap; ov...

父元素flex:1 高度却被子元素撑开的问题

Supposelll的博客

01-29

3285

当父元素设置了flex:1的情况下，想在其中子元素超出父元素高度的情况下，产生滚动条，在父元素区域滚动。但是遇到问题，当子元素高度超过父元素高度时，不会在父元素区域产生滚动条，而是超出了父元素区域，在上层产生了滚动条。

Android开发实战经典-020704-随笔提示文本：AutoCompleteTextView源代码和视频教程.zip

最新发布

07-26

Android开发实战经典_020704_随笔提示文本：AutoCompleteTextView源代码和视频教程.zip

幼儿园教育随笔：变戏法.doc

02-22

4. 创设开放性的游戏环境，允许幼儿自由发挥，能更好地促进其思维发展和问题解决能力。 5. 教育者需要关注每个孩子的个体差异，提供适应其发展需求的指导，使每个孩子都能在活动中找到乐趣和挑战。总之，这篇随笔...

教学随笔：开学新气象.doc

12-01

这篇文档虽然标题为“教学随笔：开学新气象”，但其中并未涉及具体的信息技术（IT）相关知识。描述和标签为空，部分内容主要描述了教师与学生们开学第一天的互动以及一起打扫教室卫生的情景，体现的是教育管理和班级...

flex布局中item被子元素撑大的情况

hypo的博客

07-19

479

比如下面的布局，main的宽度会被撑到800px，从而在wrapper出现滚动条。如果想main占剩余空间，又不想被child把宽度撑开，可以在main上加overflow=auto属性即可。此时main会出现滚动条。

css flex 子元素溢出时，父元素被撑开解决方案

weixin_48230016的博客

07-03

2437

3.无论多少层子元素，只要不想给限制的宽高，想让元素flex：1；自适应宽高，都一层层给flex为1时的元素宽或高为0限制下去。可以用于解决子元素溢出，撑大父元素，父元素不出现滚动条等问题。自适应填满时，子元素内容溢出，父元素内容撑大，导致页面显示问题，或设置了overflow 为scroll 的元素没出现滚动条等问题。2.同上，如果是纵向排列，flex: 1;的元素是高度铺满的，那就加上height: 0;则元素高度自适应的同事，高度不会被撑大。1.如果是横向排列，flex: 1;

CSS弹性盒子中弹性子元素文本超出弹性子元素宽或高后导致撑开弹性子元素原本宽或高的解决方法

weixin_44341110的博客

07-04

2244

CSS中解决弹性盒子的弹性子元素被文本撑开影响原来宽或高的解决办法

elementUI中el-table表格在flex布局下出现表格宽度一直在增大变化的问题解决方案(100%解决！！！)

嘿嘿

09-06

7700

解决方案：在table外层包一层div元素，设置css宽度继承自父级宽度，添加代码：position:absolute; width:100%;一般上级元素就设置这flex布局flex:1;加入一行代码：position:relative; 示例截图：注意：如果遇到flex布局中使用 el-table 时高度也出现撑开的问题时，解决思路同上，重点在于表格 el-table 外面父元素不能直接是设置有 flex:1;属性的元素，必须在表格外面在套一层父级元素，并设置绝对定位posit..