场景：

　　容器设置为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. springboot整合mybatis之注解方式

    1. 创建maven项目,工程目录如下图 2. 在pom.xml文件中添加mybatis依赖. 3. 创建实体类,并生成construct方法,getter和setter方法.同时在数据库中创建对应的 ...

  2. Window10下安装sbt

    参考:https://segmentfault.com/a/1190000002474507 下载:https://dl.bintray.com/sbt/native-packages/sbt/0.1 ...

  3. Core Graphices 设置渐变

    Core Graphices 设置渐变 Quartz 提供了两种设置渐变的方式  CGShadingRef and CGGradientRef 尝试CGGradientRef 的使用 import & ...

  4. HTML span标签：用来组合文档中的行内元素

    在DIV+CSS切图布局重构技术中,除了常常使用div标签外也常常使用span标签布局,通常也可以通过对span标签对象设置不同样式实现我们要的美化效果.这里主机吧主要讲的是span标签的定义和用法. ...

  5. 转：StarUML3.0的破解方法

    转自:https://blog.csdn.net/sam_shan/article/details/80585240 StarUML3.0的破解方法 最近StarUML由2.0更新到3.0.原来的破解 ...

  6. npm镜像地址的修改或切换

    方法一:直接编辑npm的配置文件npm config edit修改registry的地址registry=https://registry.npm.taobao.org 方法二:用代码更改npm的配置 ...

  7. mysql 多个字段合并

    group_concat 函数默认“,”合并 select p.id as patent_id,p.application_no,p.name,p.inventer,group_concat(pi.` ...

  8. redis 10个问题

    (1)什么是redis? Redis 是一个基于内存的高性能key-value数据库. (有空再补充,有理解错误或不足欢迎指正) (2)Reids的特点 Redis本质上是一个Key-Value类型的 ...

  9. Java 虚拟机面试题全面解析（干货）

    Java 虚拟机面试题全面解析(干货) JDK 是什么 JRE 是什么 Java历史版本的特性 Java Version SE 50 Java Version SE 6 Java Version SE ...

  10. jvm常见的面试题

    1. 内存模型以及分区,需要详细到每个区放什么. 2. 堆里面的分区:Eden,survival from to,老年代,各自的特点. 3. 对象创建方法,对象的内存分配,对象的访问定位. 4. GC ...