flex布局之flex-basis采坑
场景：
容器设置为display: flex，容器里的子项目部分设置 flex: auto，子项目的宽高自适应正常，但如果再往子项目里嵌套一个（如：div），并设置高度（如：height: 100%），发现该元素高度不符合预期。
源码：
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<style media="screen">
html,body{
margin: 0px;
padding: 0px;
height: 99%;
}
div{
padding: 5px 10px;
border: 1px solid silver;
}
.container {
height: 90%;
}
.flex{
display: flex;
flex-direction: column;
}
.item {
flex: 1 1 auto;
overflow: auto;
}
</style>
</head>
<body>
<div class="flex container">
<div class="">
<h3>头部信息 - 未设置高度信息</h3>
</div>
<hr>
<div class="item">
flex: auto时高度自适应情况
<div class="container">
内部嵌套要求自适应高度（百分比）的div
</div>
</div>
</div>
</body>
</html>
不符预期图：
预期效果图：
为达到预期其实只对样式略微做了调整：
.item {
flex: 1 1 100%;
overflow: auto;
}
flex是一种简写，最后一个值其实就是对应flex-basis的设置，如果同时设置flex-basis和height，那么height属性会被覆盖，也就是说flex-basis的优先级比height高。有一点需要注意，如果flex-basis和width其中有一个是auto，那么另外一个非auto的属性优先级会更高。
如果这是设置后，依然出现height： 100%无效，可以查看父级是有flex-basis：auto的情况
flex布局之flex-basis采坑的更多相关文章
- flex布局中flex属性运用在随机发红包的算法上
flex布局是现在前端基本上都会运用的一种布局,基本上用到比较多的是父元素设置display:flex,两个子元素,一个设置固定宽度,另一个设置为flex:1(这里都指flex-direction为r ...
- 重新总结flex布局（flex，flex-direction，justify-content，align-items，flex-wrap，align-self）
1.flex,主要就是按比例分配.(例如:两个div的flex:1,就大小相等) .box1{ flex:1; background-color: red; } .box2{ flex:1; back ...
- 微信小程序开发之搞懂flex布局2——flex container
容器的概念,是用来包含其它容器(container)和项目(item). flex container——flex容器 A flexbox layout is defined using the fl ...
- 微信小程序开发之搞懂flex布局3——Flex Item
Flex Item flex容器的子元素就是这个容器的flex item. The direct children of a Flex Container (elements with display ...
- [flex布局]-flex教程
简介:2009年,W3C提出了一种新的方案----Flex布局,可以简便.完整.响应式地实现各种页面布局.目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能. Flex布局是什 ...
- 微信小程序开发:Flex布局
微信小程序页面布局方式采用的是Flex布局.Flex布局,是W3c在2009年提出的一种新的方案,可以简便,完整,响应式的实现各种页面布局.Flex布局提供了元素在容器中的对齐,方向以及顺序,甚至他们 ...
- 使用Sass优雅并高效的实现CSS中的垂直水平居中(附带Flex布局，CSS3+SASS完美版)
实现css水平垂直居中的方法有很多,在这里我简单的说下四种比较常用的方法: 1.使用CSS3中的Flex布局 对于flex,我们要了解的是它是一个display的属性,而且必须要给他的父元素设置fle ...
- flex布局的使用，纪念第一次开发手机网站
一直专注于PC网站的开发,不曾接触手机网站,于今日机缘巧合也是公司业务需要,并在之前学习过flex的布局,于是一并实践.碰到的问题还是很多的,主要是谈谈flex布局. flex布局是css3里的内容, ...
- flex布局小记
越来越深刻的感到日事日毕的必要性,很久之前就做了备忘说要深刻学习flex布局,没想到一拖就拖到了这个时候! 一,什么是flex布局: flex布局即flexible box布局,也就是弹性盒模型或者弹 ...
- CSS实例详解：Flex布局
本文由云+社区发表 本文将通过三个简单的实例,实际应用上篇文章的基础理论知识,展示下Flex布局是如何解决CSS布局问题. 一．垂直居中 这里同时用非flex布局和flex布局两种方式来实现,可以对比 ...
随机推荐
- 图的遍历——DFS(矩形空间)
首先,这里的图不是指的我们一般所说的图结构,而是大小为M*N的矩形区域(也可以看成是一个矩阵).而关于矩形区域的遍历问题经常出现,如“寻找矩阵中的路径”.“找到矩形区域的某个特殊点”等等之类的题目,在 ...
- onOptionsItemSelected、onMenuItemSelected、onContextItemSelected 区别
1.在点击选项菜单(OptionsMenu:点击menu弹出的菜单)的菜单项时即调用了onMenuItemSelected 也调用了onOptionsItemSelected ,于是疑惑他们 ...
- C# 栈 、队列的概念
栈: 也是System.Collections下的数据结构 存储依然是Object类型的对象 Stack 名字 = new Stack(); Count:实际拥有的元素个数 栈的释放顺序是先进后出(后 ...
- Android Studio 加载网络图片
Android Studio是基于gradle的一个Android开发软件,在引用网络图片的时候需要连接第三方库,这里介绍 引用glide的方法. 一.在github页面搜索glide,点击第一个 二 ...
- CountDownLatch两种用法
1.当前线程等待其他线程执行完毕后在执行. 2.模拟高并发场景. 在多线程编程里,CountDownLatch是一个很好的计数器工具. 常用的两个方法: 1.计数器减一 public void cou ...
- spring mvc 自动生成代码
generator mybaits 详细配置: 目录结构 执行命令 OK git:https://gitee.com/xxoo0_297/generator.git
- Google Colab Notebook 的外部文件引用配置
Google Colab Notebook 的外部文件引用配置 Reference: How to upload the file and read Google Colab 先装工具:google- ...
- 1732157 - Collecting diagnosis information for SAP HANA [VIDEO]
Symptom SAP Support asked you to provide a collection of the relevant diagnosis files (also known as ...
- Jmeter正则表达式提取器（转载）
转载自 http://blog.csdn.net/qq_35885203 使用jmeter来测试时,经常会碰到需要上下文传输数据的情况,如登录后生成的token,在其他页面的操作,都需传入这个toke ...
- Fragment的粗浅理解
Fragment: 1.它是对于Activity界面实现的一种途径,相对于已经绑定的Layout,他更轻便,更灵活,更具有自由度和可设计性. 2.Fragment的功能正如他的正文意思所言,他是一个片 ...