场景：

　　容器设置为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. LeetCode——727.Minimum Window Subsequence

    一.题目链接:https://leetcode.com/problems/minimum-window-substring/ 二.题目大意: 给定两个字符串S和T,要求从S中找出包含T中所有字母的最短 ...

  2. is,as,类库

    is和as运算符: 所有类型的基类 object类型 - 基类:所有类型的基类,就类似是整个生物圈的生物类,是个大的概念 object o1 = new Random(); //object可以承载R ...

  3. 用GDB调试程序（六）

    七.设置显示选项 GDB中关于显示的选项比较多,这里我只例举大多数常用的选项. set print address     set print address on         打开地址输出,当程 ...

  4. python3 kmp 字符串匹配

    先声明,本人菜鸟一个,写博客是为了记录学习的过程,以及自己的理解和心得,可能有的地方写的不好,希望大神指出... 抛出问题 给定一个文本串test_str(被匹配的字符串)和模式串pat_str(需要 ...

  5. android 开发 View _2_ View的属性动画ObjectAnimator ，动画效果一览

    支持:https://www.cnblogs.com/whoislcj/p/5738478.html translationX的效果: protected void onCreate(Bundle s ...

  6. python 正则表达式 RE模块汇总记录

    re.compile(pattern, flags=0) re.search(pattern, string, flags=0) re.match(pattern, string, flags=0) ...

  7. leetcode22

    public class Solution { public IList<string> GenerateParenthesis(int n) { List<string> l ...

  8. tp5文件上传展示

    //接收文件 $file = request()->file('image'); //将文件移动到框架应用根目录/public/uploads/ 目录下 $info = $file->mo ...

  9. 多个css样式合并到一个“目录”css文件中

    执行访问jsp后发现没有效果 同样的代码,在html中效果对比如下: 具体原因:不清楚,暂时记着~~~在jsp中不支持@import这种css样式的引用

  10. mysql连接测试java脚本

    JDBC.java import java.io.IOException; import java.io.InputStream; import java.sql.*; import java.uti ...