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

这几天使用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 失效相关推荐

背景平铺两栏自适应（占满剩余高度）fastclick、IScroll双飞翼布局
文章目录背景平铺两栏自适应(占满剩余高度) 需求实现 fastclick插件的使用 IScroll插件的使用(实现区域滚动效果) 条件双飞翼布局(两边固定宽度,中间自适应) 条件实现背景平 ...
flex 换主轴后子元素占满_Chrome72 嵌套 flex 布局修改，你的网站可能会发生布局错乱...
起源 2019 年 1 月 29 日,Chrome72 正式版(72.0.3626.81)发布,本次发布带来了一个改变,且没有在更新日志中提及,该改变导致某些网站发生了布局错乱.该改变主要针对的是嵌套 ...
容器撑满占满整个高度，垂直居中等
容器撑满占满整个高度,垂直居中等 1.height: 100% 需要先定义,html,body 高度为height: 100%才可以起作用. html, body {widht: 100%;heigh ...
一个div分上下两部分，上部分高度不固定，下面部分自动填满剩余高度
div自动填满剩余高度 html <div class="wrapper" style="height:800px;"><div class= ...
flex 换主轴后子元素占满_Flex布局
在没有接触Flex之前一直使用float.display.position .说实话用起来非常恶心.当使用Flex时,我们可以简洁优雅实现复杂的页面布局 1.Flex 布局? 在 flex 容器中默认 ...
如何将div高度填满剩余高度
下列代码中navbar高度为30px,content高度需要填满浏览器的剩余高度 <div id="body"> <div id="navbar&quo ...
flex 换主轴后子元素占满_css flex justify-content属性，子元素在主轴上的对齐方式。...
css flex justify-content属性,子元素在主轴上的对齐方式. justify-content属性控制子元素在主轴上的对齐方式,支持flex-start . flex-end . c ...
css div填满剩余高度
<div class="father"><div class="child1"></div><div class=&q ...
CSS实现div填满剩余高度
需求: nav和content盒子的高度和浏览器高度相同,且不能出现纵向滚动条绿色盒子高度固定,比如:50px 紫色盒子填充剩余的高度 BODY部分的代码: 方式一:绝对定位方式二:box-siz ...

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

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

最新文章

热门文章

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

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

最新文章

热门文章

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

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