场景：

　　容器设置为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. python3学习笔记六（元组）

    元组 创建空元组 tup1 = () #空元组print(type(tup1))print(tup1) tup2 = (10)tup3 = (10,)print(type(tup2)) #不加逗号,类 ...

  2. java代码------charAt()的用法

    总结:你看这个方法的用处真的蛮多比如这个计算器小项目,用这个charAt()方法来装运算符 package com.mmm; import java.util.Scanner; public clas ...

  3. 用GDB调试程序（二）

    GDB的命令概貌——————— 启动gdb后,就你被带入gdb的调试环境中,就可以使用gdb的命令开始调试程序了,gdb的命令可以使用help命令来查看,如下所示: /home/hchen> g ...

  4. 竖直的ViewPager，上下滑动的ViewPager，VerticalViewPager ；

    直接看代码吧,重写Viewpager,改变了手势和切换效果:和正常的Viewpager使用一模一样: /** * ChenboCui 竖向的Viewpager */ public class Vert ...

  5. ios7自定义返回按钮后，右滑返回功能失效解决方法

    -(void)viewWillAppear:(BOOL)animated{     [super viewWillAppear:animated];     //开启ios右滑返回     if ([ ...

  6. python中__get__,__getattr__,__getattribute__的区别

    __get__,__getattr__和__getattribute都是访问属性的方法,但不太相同. object.__getattr__(self, name) 当一般位置找不到attribute的 ...

  7. 吴裕雄 python深度学习与实践（15）

    import tensorflow as tf import tensorflow.examples.tutorials.mnist.input_data as input_data mnist = ...

  8. vue单页面处理SEO问题

    设置vue 单页面meta info信息 vue-meta-info,(https://github.com/muwoo/vue-meta-info)如果需要单页面SEO,可以和 prerender- ...

  9. 初学c# -- 开始学directx

    这些天对directx有兴趣了,开始慢慢学,先学基础,找了好些资料,为毛都写的辣么长呢,学习精简下来就几行. 安装个directx sdk,在win10里面文件夹C:\Windows\Microsof ...

  10. 大数据学习笔记2 - 分布式文件系统HDFS（待续）

    分布式文件系统结构 分布式文件系统是一种通过网络实现文件在多台主机上进行分布式存储的文件系统,采用C/S模式实现文件系统数据访问,目前广泛应用的分布式文件系统主要包括GFS和HDFS,后者是前者的开源 ...