场景：

　　容器设置为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. es的返回数据结构

    ES即简单又复杂,你可以快速的实现全文检索,又需要了解复杂的REST API.本篇就通过一些简单的搜索命令,帮助你理解ES的相关应用.虽然不能让你理解ES的原理设计,但是可以帮助你理解ES,探寻更多的 ...

  2. 实验五：Xen环境下多虚拟机的桥接配置

    实验名称: Xen环境下多虚拟机的桥接配置 实验环境: 这里我们首先需要有一台已经安装好的虚拟机机,能够正常运行,且网卡正常,如下图: 实验需求: 进行虚拟机的复制,并添加新的网桥配置,然后将两台虚拟 ...

  3. vue+element 实现在表格内插入其他组件，每行数据独立存储

    使用  v-slot row代表当前行

  4. 面向对象object与constructor

    什么是constructor属性?它来自哪里?又将会指向何处? 什么是constructor属性? constructor是构造函数属性. 它来自哪里? 其实constructor属性是来自 prot ...

  5. python常见循环练习

    第一题:求5的阶乘 # 方法1,递归 def jc(num): if num == 1: return 1 else: return num*jc(num-1) print(jc(5)) # 方法2, ...

  6. linux命令行抓取网页快照

    linux命令行抓取网页快照-(xvfb+CutyCapt)   目的: 在一台没有安装X-server的Debian服务器上实现命令行抓取网页快照 软件: xvfb(在命令行下实现对X-server ...

  7. spark java.lang.OutOfMemoryError: unable to create new native thread

    最近迁移集群,在hadoop-2.8.4 的yarn上跑 spark 程序 报了以下错误 java.lang.OutOfMemoryError: unable to create new native ...

  8. Java Day26进程01天

    Java开启多个线程有两种方法,一种继承Thread类,一种实现Runnable接口.具体示例如下: 01继承Thread类 02实现Runnable接口

  9. MANIPULATION

    MANIPULATION Generalizations Congratulations! You learned how to use the command line to view and ma ...

  10. 使用jQuery+huandlebars遍历if判断不足引用helper

    兼容ie8(很实用,复制过来,仅供技术参考,更详细内容请看源地址:http://www.cnblogs.com/iyangyuan/archive/2013/12/12/3471227.html) & ...