子元素设置flex-grow:1，却比父元素高/宽的解决方案

原创已于 2024-01-04 16:58:35 修改 · 1.2k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3 #前端

于 2024-01-04 16:13:04 首次发布

前端学习专栏收录该内容

3 篇文章

订阅专栏

博客探讨了在F12开发者工具中，设置flex - grow:1后子元素比父元素高的问题。原因是flex布局默认min - height/min - weight:auto，使子元素min - height为其自身height，撑大了父元素，设置min - height:0可解决。

打开F12开发者工具，可以看到父元素高度只有439px

子元素高度714px。

明明设置了flex-grow:1;理应填充父元素剩余空间，为什么会比父元素高呢？

其实是flex布局默认min-height/min-weight:auto，导致子元素min-height为子元素的height，撑大了父元素，设置min-height:0即可恢复正常。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

adamxuu

关注关注

12
点赞
踩
10

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

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

Supposelll的博客

01-29

5107

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

关于ipad的flex-grow:1属性失效问题

李恒道的博客

01-24

1263

w3c手册转载自油猴中文网：https://bbs.tampermonkey.net.cn/forum.php 李恒道QQ4548212 油猴中文网https://bbs.tampermonkey.net.cn/forum.php TamperMonkey GreaseMonkey 油猴脚本脚本交流脚本分享油猴脚本开发油猴基础开发油猴油猴中文公众号:叛逆青年旅舍https://bbs.tampermonkey.net.cn/forum.php 这里参考的是 10.5 Content h

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

1 条评论

优快云-Ada助手 2024.01.06
首先恭喜你写了第11篇博客！看到你解决了子元素设置flex-grow:1，却比父元素高/宽的问题，真是令人佩服。不过，我觉得你可以尝试写一些关于flex-shrink和flex-basis的内容，这样可以帮助更多的读者理解flex布局的原理。希望你能继续保持创作的热情，期待你的下一篇博客！

深入理解css3中的flex-grow、flex-shrink、flex-basis （转）

weixin_33800593的博客

03-10

2094

转自：http://zhoon.github.io/css3/2014/08/23/flex.html 感谢他的整理 flex为css的布局带来了新的时代，作为一个重构工程师，我们再也不用局限于float和position，特别是在移动端，我们可以利用flex轻松实现以往float和psition很难实现甚至是无法实现的布局。本文主要讲解flex的三个子属性：flex-grow、f...

flex:1详解

fatpsm的博客

08-05

1905

flex:1详解

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

weixin_60547084的博客

03-20

1万+

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

使用flex-grow:1来分配剩余空间时，子元素会超过父元素的宽度

qq_59625204的博客

09-23

678

如果父元素设置为flex布局，宽度为200px，左边left容器宽度设置为100px，right容器设置flex-grow:1,如果此时子元素的宽度超过了父元素的剩余分配空间，则不会溢出显示省略号，此时给right的宽度设置为0就可以让子元素的宽度不超过父元素的宽度，来实现溢出显示省略号。

[css] flex 子元素自动撑开父元素宽度

qq_14993591的博客

11-03

4516

这样，子元素将会垂直排列在一列内，并自动撑开父元素的宽度。同样地，如果子元素的高度总和超过了父元素的高度，则子元素会被压缩，以适应父元素的高度。这样，子元素将会水平排列在一行内，并自动撑开父元素的宽度。如果子元素的宽度总和超过了父元素的宽度，则子元素会被压缩，以适应父元素的宽度。对于水平排列的情况，我们可以设置父元素的。对于垂直排列的情况，我们可以设置父元素的。

深入理解 flex-grow、flex-shrink、flex-basis

每天都要努力学习哦~~

09-22

3502

flex items 总和超出 flex 容器，会根据 flex-shrink 的设置进行压缩如果有剩余空间，如果设置 flex-grow，子容器的实际宽度跟 flex-grow 的设置相关。如果没有设置flex-grow，则按照 flex-basis 展示实际宽度flex 1在CSS中，flex是flex-grow, 和flex-basis这三个属性的简写形式。当你看到flex: 1;- 表示如果容器内有多余的空间，这个元素会按照比例增长来占据这些空间。

css弹性盒子-------桃园三兄弟之：flex-grow、flex-shrink、flex-basis详解

最新发布

06-25

- **问题**：子元素有固定尺寸（如 `width: 100px`）或 `flex-basis` 值过大 - **示例**： ```css .item { flex-grow: 1; /* 无效 */ width: 300px; /* 冲突！优先于 flex-grow */ } ``` - **修复**：...

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

aleluye的博客

07-18

608

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

flex布局，子项在主轴上超出父容器的问题

qq_42885703的博客

06-13

632

flex布局，子项在主轴上超出父容器的问题

css如何让子元素行高于父元素一致的方法：

weixin_42229373的博客

09-24

1707

非，常，简，单前提：父子元素都设置了定位，比如： 父元素： style="position:relative " 子元素： style="position: absolute;" 只要设置子元素的top和bottom值为0就可以了。成品： <div style="position:relative "> <div style="position: absolute;top: 0px;bottom: 0px;"></div...

flex布局下，子元素高度问题。

big_gg的博客

05-24

1万+

在父元素添加了align-items之后，子元素的高度，由自身内容决定。当不添加align-items时，父元素高度由最高子元素决定，不够的就占满。如下图：去掉父元素的align-items之后。这是我在维护他人代码时发现的问题。如图，为了使icon与文字底部对齐，每一行都是flex布局row, 然后align-items:flex-end。但当右边字体超出一行的时候，父容器被撑高，但子元素还是自身高度，就会导致一下情况。我这里我本来想给icon加个height：100%，占满父元素的，但是

父盒子设置flex布局子元素设置高和宽不生效问题

weixin_57011137的博客

06-10

4246

这是因为定义为flex布局元素的子元素，自动获得了flex-shrink的属性，这个属性就是是告诉子元素当父元素宽度不够用时，自己调整自己所占的宽度比，这个flex-shrink设置为1时，表示所有子元素大家同时缩小来适应总宽度和高度即设置的高度和宽度不生效。当flex-shrink设置为0时，表示大家都不缩小适应即设置的高度和宽度可以生效。所以，倘若给父元素设置了flex布局后，若要其子元素的width和height有效果，必须给子元素设置flex-shrink为0。...

css 父元素高度自适应子元素高度

夕降巫咸的博客

03-22

3460

最近升级系统发现一个问题，子标签存放的是一个Table，数据增加行增加后父标签不增加，不同的背景颜色让人蛋疼，查找大量资料以及各种方法发现，原来只要清除浮动即可解决。 <div id="父标签"> <div id="子标签"></div> <br style='clear:both'/><!--只要清除浮动即可--&...

弹性布局，让所有子元素高度一致

weixin_47517731的博客

04-25

2975

给子元素高度设置为给父元素弹性设为。

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

HDdgut的博客

08-29

3105

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