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

最新推荐文章于 2024-07-29 11:10:01 发布
最新推荐文章于 2024-07-29 11:10:01 发布
阅读量6k 收藏 1
点赞数 3
分类专栏： 前端问题 文章标签： css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ddyy2695734664/article/details/112761966
版权

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

大大大颖er
关注
专栏目录
Flex布局之关于组件的大小
07-27
在Flex布局中，当多个宽度相关的属性同时被设置时，Flex框架有一套内置的逻辑来解决这些属性之间的冲突。例如，如果*percentWidth*和*explicitWidth*同时被设置，且它们的值不一致，那么最终的宽度将取决于这两个...
开发随笔:flex:1被内部元素撑开问题解决办法
热门推荐
qq_24724109的博客
12-27 1万+
flex:1由于内部元素被撑开的问题 问题描述 当flex:1的元素当其子元素过长(文本过长)时，会直接撑开父元素 <!---html---> <div class="wrapper"> <div class="left">1</div> <div class="middle"> ...
父元素flex:1时高度被子元素撑开的解决方法
weixin_46447553的博客
01-05 2026
父元素flex:1时高度被子元素撑开的解决方法
弹性布局---display: flex
最新发布
weixin_45406850的博客
07-29 988
Flexbox 是 flexible box 的简称（注：意思是“灵活的盒子容器”），是 CSS3 引入的新的布局模式。它决定了元素如何在页面上排列，使它们能在不同的屏幕尺寸和设备下可预测地展现出来。它之所以被称为 Flexbox ，是因为它能够扩展和收缩 flex 容器内的元素，以最大限度地填充可用空间。在不同方向排列元素重新排列元素的显示顺序更改元素的对齐方式动态地将元素装入容器通过使用display: flex属性来创建一个弹性容器，并在其中使用灵活的盒子模型来进行元素的排列和定位。
父元素设置flex：1；子元素内容过程导致被撑开
Moon Star
05-08 2552
<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;，就可以解决 ...
flex: 1； 子元素高度较高时不展示滚动条而是撑开父元素
xiaoxiannv666的博客
10-14 3635
flex布局中，flex: 1; overflow: auto;的子元素没有如期展示滚动条，而是被内容撑开高度；
flex布局宽高被内容撑开的问题
weixin_43794007的博客
11-01 2661
在使用 el-table 组件时，父级容器设置flex:1布局，但是宽/高会被整体内容撑开，导致布局失调。
flex:1的大坑
i-cat的博客
09-16 1336
设置flex:1不生效,高度还是会超出父元素,如何解决?
html div没有被撑开的原因及解决办法
11-15
如果`div`内部的子元素被设置了`position: absolute`，它会从正常文档流中移除，不再影响父元素的尺寸。因此，父`div`可能不会自动扩展以适应它。 **解决方案：** 1. 如果可能，避免使用绝对定位，或者尝试使用相对...
纯CSS让子元素突破父元素的宽度限制
11-19
在CSS布局中，我们经常遇到子元素无法突破父元素的宽度限制的问题，这是因为在默认情况下，子元素的宽度是受限于父元素的宽度的。但是，有时候我们需要子元素突破父元素的宽度限制，以实现某些特殊的布局效果。 在...
浅析两列自适应布局的3种思路
09-27
如果表格的`table-layout`属性未设置为`fixed`，其宽度会由内容自动撑开。在这个方法中，我们可以将父容器设置为`display: table`，左侧栏的外层包裹一个具有极小宽度（如`width: 0.1%`）的`display: table-cell`...
css中间自适应布局的5种解法详解
12-14
Flex布局是现代CSS布局的标准，它允许父元素（容器）定义其子元素如何分配空间。在这个例子中，父元素设置`display: flex`，中间栏设置`flex: 1`，使得它能占据剩余的空间。Flex布局在实际开发中广泛使用，具有良好...
echarts不会随着flex布局自适应伸缩
weixin_39808181的博客
06-17 2545
echarts在调用resize时会重绘，如果你的子div没有设置宽度，只是设置了flex：1；那么会有如下场景发生：触发图表resize后，子元素宽度全为0，父元素宽度也为0，会导致第一个重绘完成的图表所在的子div宽度不明确，可能会使得第一个绘制完成的图表宽度在resize后还是默认的宽度 ...
flex：1的容器会被内部元素撑开的解决方法
weixin_42274805的博客
04-07 1342
.main { flex: 1; } 改为： .main { flex: 1; overflow: hidden; }
父元素flex:1 高度却被子元素撑开的问题
Supposelll的博客
01-29 3322
当父元素设置了flex:1的情况下，想在其中子元素超出父元素高度的情况下，产生滚动条，在父元素区域滚动。但是遇到问题，当子元素高度超过父元素高度时，不会在父元素区域产生滚动条，而是超出了父元素区域，在上层产生了滚动条。
flex:1时，父元素宽度被子元素撑开
Zoey_J的博客
09-18 8584
当子元素设置超出不换行时，若子元素的宽度超出了父元素宽度（均分后），则会将父元素撑开，即 flex:1 失效 <div style="width: 100%; display: flex;"> <div style="background-color: orange; flex: 1;"> <p style="white-space: nowrap; ov...
flex布局中item被子元素撑大的情况
hypo的博客
07-19 480
比如下面的布局，main的宽度会被撑到800px，从而在wrapper出现滚动条。如果想main占剩余空间，又不想被child把宽度撑开，可以在main上加overflow=auto属性即可。此时main会出现滚动条。
flex：1；会被子元素撑开问题
CZDBGSY的博客
07-23 404
1定高后，2自适应；直接给2flex:1;如果子元素过多，会被子元素撑开，随便加一个高度就好了。
如何解决flex:1撑开父元素问题
天蚕土豆丝的博客
12-14 7178
开发过程中很多时候需要一个区域自动撑开，并且在刚好撑开的区域内实现滚动，这时用flex:1去做。但实际效果很多时候会出现区域撑的过大，却没有滚动效果。 要实现4自动撑满剩余空间，并且里面的内容超出时滚动。 容器1设置 display:flex;flex-direction:column;height:100%; 容器2设置 display:flex;flex-direction:column;flex:1;overflow:auto;这里overflow:auto不会有滚动效果，只是阻止容器2被撑大，不设置
flex布局撑开宽度
09-08
使用flex布局时，可以通过设置flex-shrink属性为0来阻止子元素被内容撑开。例如，在ul li的样式中设置flex-shrink: 0;可以实现这一效果。 如果想要实现左右布局，并且右边的盒子自适应宽度，可以设置左边盒子的定宽为200px，然后将右边盒子的宽度设置为0，并使用flex: 1;的样式来让宽度由flex布局来决定。这样，右边的盒子就会自动撑开，不会被内容撑开。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值