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

已于 2024-01-04 16:58:35 修改
阅读量838 收藏 9
点赞数 11
分类专栏： 前端学习 文章标签： css css3 前端
于 2024-01-04 16:13:04 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/adamxuu/article/details/135389611
版权

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

子元素高度714px。

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

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

adamxuu
关注
  • 11
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
flex-container:使用Flex
03-27
- **align-self**：允许单独的子元素覆盖其父容器的`align-items`设置。 ### 子元素属性 除了容器属性，还有针对子元素的属性来调整它们在Flex容器内的表现： - **flex-grow**：定义元素在剩余空间内的放大比例。 ...
flex-layout:基于 Flexbox 的网格布局抽象
05-30
在Flex布局中，容器（flex container）是包含一系列子元素（flex items）的元素，可以通过设置容器的`display`属性为`flex`或`inline-flex`来启用Flex布局。这样，容器可以沿主轴（flex-direction定义的方向）或侧轴...
css flex 子元素溢出时，父元素被撑开解决方案
weixin_48230016的博客
07-03 1402
3.无论多少层子元素，只要不想给限制的宽高，想让元素flex：1；自适应宽高，都一层层给flex为1时的元素 宽或高 为0限制下去。可以用于解决子元素溢出，撑大父元素，父元素不出现滚动条等问题。自适应填满时，子元素内容溢出，父元素内容撑大，导致页面显示问题，或设置了overflow 为scroll 的元素没出现滚动条等问题。2.同上，如果是纵向排列，flex: 1;的元素是高度铺满的，那就加上height: 0;则元素高度自适应的同事，高度不会被撑大。1.如果是横向排列，flex: 1;
父元素flex:1 高度却被子元素撑开的问题
Supposelll的博客
01-29 2994
当父元素设置了flex:1的情况下，想在其中子元素超出父元素高度的情况下，产生滚动条，在父元素区域滚动。但是遇到问题，当子元素高度超过父元素高度时，不会在父元素区域产生滚动条，而是超出了父元素区域，在上层产生了滚动条。
css利用flex分配剩余高度出现子组件溢出问题
HDdgut的博客
08-29 2729
是一个CSS属性，用于指定弹性容器内弹性项目的伸缩能力和分配比例。情景：父组件高度一定，子组件中，其他子组件高度固定，一个子组件高度不确定（页面滚动列表）多重嵌套的时候，父组件中也有flex:1，同样需要使用overflow属性控制溢出；当子组件的内容超出了容器的高度(父组件)时候，（推荐），或是限制子组件的最大高度。1.利用flex分配剩余高度/宽度。
关于 flex 布局时，子元素宽度超出父元素问题及解决方案（问题）
热门推荐
weixin_60547084的博客
03-20 1万+
这个是我在项目中遇到的一个bug，使用的 flex 布局，由于我动态的修改绿色盒子的显示与隐藏，导致两边盒子的挤压。先看效果图，大家可以看一下下面的样式，很明显左边和右边的盒子我是给的定宽，但是被挤压了。很明显，红色的盒子没有300px。
使用flex-grow:1来分配剩余空间时，子元素会超过父元素的宽度
qq_59625204的博客
09-23 438
如果父元素设置为flex布局，宽度为200px，左边left容器宽度设置为100px，right容器设置flex-grow:1,如果此时子元素的宽度超过了父元素的剩余分配空间，则不会溢出显示省略号，此时给right的宽度设置为0就可以让子元素的宽度不超过父元素的宽度，来实现溢出显示省略号。
[css] flex 子元素自动撑开父元素宽度
qq_14993591的博客
11-03 3184
这样，子元素将会垂直排列在一列内，并自动撑开父元素的宽度。同样地，如果子元素的高度总和超过了父元素的高度，则子元素会被压缩，以适应父元素的高度。这样，子元素将会水平排列在一行内，并自动撑开父元素的宽度。如果子元素的宽度总和超过了父元素的宽度，则子元素会被压缩，以适应父元素的宽度。对于水平排列的情况，我们可以设置父元素的。对于垂直排列的情况，我们可以设置父元素的。
flex布局子元素超出父元素
qq_43101834的博客
01-26 7788
遇到的问题： 父元素是body，宽度给100%。子元素想要距离屏幕两侧各10px，但我给子元素也设置了100%且是flex布局，这时宽度超出屏幕，页面开始横向滑动！ 最终想要的效果是不横向滑动页面完整展示。 现在记录一下这个问题，警告自己，当时写的时候脑子估计废掉了。 类似上图中，子元素 ...
flex布局 ——子元素保持自身高度
追逐知识的过程最能使我们意识到自己的无知...
12-01 4975
flex布局 ——子元素保持自身高度，不跟随父元素高度自适应
flex-blog：Projeto de site do curso da OrigamID feito com CSS flex box
02-15
在CSS Flexbox布局模型中，容器（Flex Container）是包含一系列子元素（Flex Items）的父元素，通过设置容器的属性，可以控制子元素的排列、对齐和分配空间。在这个“flex-blog”项目中，我们可能可以看到以下关键...
flex布局-flex-layout-master.zip
01-03
1. **Flex容器（Flex Container）**：这是使用`display: flex`或`display: inline-flex`属性定义的父元素。容器内的子元素会成为Flex项（Flex Items），并受到Flex布局规则的约束。 2. **主轴（Main Axis）与交叉轴...
flexbox-navigation：使用flex box创建导航
02-13
Flexbox模型是一种一维布局模式，适用于容器（父元素）和其内部的项目（子元素）。容器被设置为“flex容器”，通过应用`display: flex`或`display: inline-flex`样式。一旦设置，容器内的子元素会自动沿主轴（默认为...
深入理解css3中的flex-grow、flex-shrink、flex-basis （转）
weixin_33800593的博客
03-10 1920
转自：http://zhoon.github.io/css3/2014/08/23/flex.html 感谢他的整理 flex为css的布局带来了新的时代，作为一个重构工程师，我们再也不用局限于float和position，特别是在移动端，我们可以利用flex轻松实现以往float和psition很难实现甚至是无法实现的布局。 本文主要讲解flex的三个子属性：flex-grow、f...
html+css实战78-显示模式-块
geyaoisnice的博客
06-08 319
html
flex子元素固定宽度被压缩，flex为1的宽度超出父元素显示不全
最新发布
aleluye的博客
07-18 208
当父元素的宽度为flex，子元素一个是。（table），变化页面宽度，会出现。固定宽度被压缩，表格宽度超出。，一个宽度自适应占据剩下的。固定宽度元素增加属性。
flex-grow 1的问题
qq_26239917的博客
06-05 553
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> .box { width: 500px; display: flex; background-color: #FF00...
使用flex布局，子元素怎么高度自适应？
风华绝代的博客
11-01 7622
1、想用flex实现这种布局 2、各个子元素高度不固定，从上到下依次排列 请问可以怎么实现？ 附： 我对父元素定义了下面的规则： display:flex; flex-flow:row wrap; 对子元素用p标签放了一些文本，未设置高度，结果显示效果如下红色标记是子元素被拉伸了，高度没有自适应： 父元素上增加align-items: flex-start; 因为交叉轴的对齐方式，默认是 stretch ...
flex-grow:3
10-25
flex-grow:3是一个CSS属性，它作用于flex子元素，用于控制flex子元素在父容器中的分配比例。具体来说，如果一个父容器中有多个flex子元素，且它们的flex-grow属性值不同，那么父容器在分配剩余空间时，会按照各个子...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值