场景：

　　容器设置为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采坑的更多相关文章

  1. flex布局中flex属性运用在随机发红包的算法上

    flex布局是现在前端基本上都会运用的一种布局,基本上用到比较多的是父元素设置display:flex,两个子元素,一个设置固定宽度,另一个设置为flex:1(这里都指flex-direction为r ...

  2. 重新总结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 ...

  3. 微信小程序开发之搞懂flex布局2——flex container

    容器的概念,是用来包含其它容器(container)和项目(item). flex container——flex容器 A flexbox layout is defined using the fl ...

  4. 微信小程序开发之搞懂flex布局3——Flex Item

    Flex Item flex容器的子元素就是这个容器的flex item. The direct children of a Flex Container (elements with display ...

  5. [flex布局]-flex教程

    简介:2009年,W3C提出了一种新的方案----Flex布局,可以简便.完整.响应式地实现各种页面布局.目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能. Flex布局是什 ...

  6. 微信小程序开发:Flex布局

    微信小程序页面布局方式采用的是Flex布局.Flex布局,是W3c在2009年提出的一种新的方案,可以简便,完整,响应式的实现各种页面布局.Flex布局提供了元素在容器中的对齐,方向以及顺序,甚至他们 ...

  7. 使用Sass优雅并高效的实现CSS中的垂直水平居中(附带Flex布局，CSS3+SASS完美版)

    实现css水平垂直居中的方法有很多,在这里我简单的说下四种比较常用的方法: 1.使用CSS3中的Flex布局 对于flex,我们要了解的是它是一个display的属性,而且必须要给他的父元素设置fle ...

  8. flex布局的使用，纪念第一次开发手机网站

    一直专注于PC网站的开发,不曾接触手机网站,于今日机缘巧合也是公司业务需要,并在之前学习过flex的布局,于是一并实践.碰到的问题还是很多的,主要是谈谈flex布局. flex布局是css3里的内容, ...

  9. flex布局小记

    越来越深刻的感到日事日毕的必要性,很久之前就做了备忘说要深刻学习flex布局,没想到一拖就拖到了这个时候! 一,什么是flex布局: flex布局即flexible box布局,也就是弹性盒模型或者弹 ...

  10. CSS实例详解：Flex布局

    本文由云+社区发表 本文将通过三个简单的实例,实际应用上篇文章的基础理论知识,展示下Flex布局是如何解决CSS布局问题. 一．垂直居中 这里同时用非flex布局和flex布局两种方式来实现,可以对比 ...

随机推荐

  1. 深入理解Spring Boot属性配置文件

    我们在开发Spring Boot应用时,通常同一套程序会被应用和安装到几个不同的环境,比如:开发.测试.生产等.其中每个环境的数据库地址.服务器端口等等配置都会不同,如果在为不同环境打包时都要频繁修改 ...

  2. autoit3编辑器SCITE字体设置

    选项→打开全局设置文件,就是SciTEGlobal.properties,修改下面的部分即可,保存之后立刻生效.如果不行,就打开用户设置文件SciTEUser.properties进行修改: font ...

  3. C#编程经验-VS Debug

    F11 OneStepDebugF10 ProcessDebugbreakPointDebug(quick location,then use one step debug)

  4. Xtrabackup2.4.8备份、还原、恢复Mysql5.7.19实操(网络拷贝)

    环境:CentOS 6.7  + Mysql 5.7.19 + Xtraback 2.4.8 innobackupex常用参数: --user=USER 指定备份用户,不指定的话为当前系统用户 --p ...

  5. 导出Excel实现 (ASP.NET C# 代码部分)

    背景: 实现导出Excel功能. 技术: ASP.NET  , 采用`Aspose.Cells`第三方组件, C# 实现通用部分. 根据前台Ext Grid完成导入Excel中文列与实际存储列的对应关 ...

  6. REST framwork之分页器，路由器，响应器

    一 REST framwork分页器: from rest_framework.pagination import PageNumberPagination,LimitOffsetPagination ...

  7. 关于PHP代码复用‘traits’的一段代码

    附:代码摘自菜鸟教程 <?php// 定义一个类名Base对象,并带有公共函数sayHello class Base { public function sayHello() { echo 'H ...

  8. Sublime Text 3激活

    Sublime Text 3激活方式: 一.修改hosts文件: 1:windows系统:      找到 C:\Windows\System32\drivers\etc\hosts 这个文件,  用 ...

  9. JAVA方法参数传递

    package demo.methodparamDemo; public class MethodParamsDemo { public static void main(String[] args) ...

  10. PHP安装Commposer

    一先把php加到环境变量里面测试 看一下版本号: 二,composer得安装注意安装的时候 php必须在5.59以上版本,openssl的扩展开启,pdo的扩展开启,mbstring的扩展开启 1,下 ...