flex 子元素占满剩余高度与 flex:1 的子元素 overflow:hidden 失效

最新推荐文章于 2025-09-11 11:53:32 发布

原创最新推荐文章于 2025-09-11 11:53:32 发布 · 2.1w 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#flex #页面布局 #css3 #overflow:hidden

html/css/js 专栏收录该内容

17 篇文章

订阅专栏

本文详细讲解了如何使用Flex布局让子元素占满父元素的剩余空间，包括设置父元素的display和flex-direction属性，以及子元素的flex属性。同时，解决了在特定情况下子元素overflow属性失效的问题。

这几天使用flex开发大屏，遇到一个印象比较深的问题就是flex的子元素，在其他兄弟元素的高度不定的情况下，如何占满父元素的剩余空间？

效果图：

要点就是：

1、父元素要设置 display: flex;

2、父元素的主轴方向设置为从上到下 flex-direction: column;

3、父元素的高度能确定，不管是定高（height: 500px;），还是 100% 其父元素的高度

4、需要占满剩余高度的子元素，设置 flex:1; 或者 flex-grow:1;

因为 ( flex:1; ) == ( flex: 1 1 0%; ) == ( flex-grow:1;flex-shrink:1; flex-basis:0%;) == (父控件有剩余空间占1份放大，父控件空间不足按1缩小，自身的空间大小是0%)

如果你对另外两个属性要要求可以另外设置。

下面是测试的代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.father{
			color: #000;
			display: flex;
			-webkit-box-orient: vertical;
		    -webkit-box-direction: normal;
		    -ms-flex-direction: column;
		    flex-direction: column;
			height: 500px;
			width: 300px;
		}
		.child1{
			background:red;
		}
		.child2{
			background: green;
			flex:1;

		}
	</style>
</head>
<body>
	<div class="father">
		<div class="child1">我的高度不定</div>
		<div class="child2">我要占满father的剩余高度</div>
	</div>
</body>
</html>

当然了，其实联想一下，就会发现，上面的方法应对占满剩余宽度也是可行的，这个就看各位看官如何变通了，我就不再赘述了。

-----------------------------------------------------------------------分割线-------------------------------------------------------------

接下说说在flex：1 的子元素 overflow:hidden 失效的问题，这个问题出现在当 flex父元素高度不足时，会被子元素撑开高度，这不是我们想要的,解决方法：

min-width: 0 或者 min-height: 0 

width: 0 或者 height: 0

上面的方法都是可行的。

flex 子元素占满剩余高度 与 flex:1 的子元素 overflow:hidden 失效

flex 子元素占满剩余高度与 flex:1 的子元素 overflow:hidden 失效