查遍各大资源无任何flex嵌套布局的例子，经过自己折腾完成了项目中的高度自适应需求（更多应用于前端组件）

效果图：

html代码：（关键地方已经用颜色特别标识 ^_^）

<!DOCTYPE html>

<html>

<head>

  <meta charset="UTF-8">

  <title>flex 嵌套 之 高度自适应</title>

  <style media="screen">

    body, html {

        height: 90%;

    }

    .flex {

        display: -webkit-flex;

        display: flex;

        flex-direction: column;

    }

    .item {

        flex: auto;

    }

    .overflow {

        overflow: auto;

    }

    .outer {

        height: 70%;

        border: 1px solid silver;

    }

    .contener {

        background: pink;

        border: 1px solid silver;

    }

    .contener>div{

        padding: 5px;

    }

  </style>

</head>

<body>

  <h1>flex 嵌套布局</h1>

<div class="flex outer">

  <div style="background-color: silver; padding: 10px;">外容器 自适应内容的区域 ... ...</div>

  <div class="flex item overflow" style="padding: 15px;"> <!-- 嵌套的item加flex样式 及 overflow: auto属性 -->

    <div class="flex contener overflow">                  <!-- overflow: auto 高度自适应必须 -->

      <div style="background-color: yellow;">

        <h3>内容器 - 头部信息</h3>

      </div>

      <div class="item overflow">                         <!-- overflow: auto 高度自适应必须 -->

        内容溢出滚动部分 <br>内容溢出滚动部分 <br>内容溢出滚动部分 <br>内容溢出滚动部分 <br>内容溢出滚动部分 <br>内容溢出滚动部分 <br>内容溢出滚动部分 <br>

          内容溢出滚动部分 <br>内容溢出滚动部分 <br>内容溢出滚动部分 <br>内容溢出滚动部分 <br>内容溢出滚动部分 <br>内容溢出滚动部分 <br>内容溢出滚动部分 <br>

            内容溢出滚动部分 <br>内容溢出滚动部分 <br>内容溢出滚动部分 <br>内容溢出滚动部分 <br>内容溢出滚动部分 <br>内容溢出滚动部分 <br>内容溢出滚动部分 <br>

      </div>

      <div style="background-color: yellow;">

        <h3>内容器 - 尾部信息</h3>

      </div>

    </div>

  </div>

</div>

</body>

</html>

 总结：

　　flex布局嵌套的关键，就是对item进行容器定位，赋予flex特性。

flex知识学习小游戏： https://flexboxfroggy.com/

flex布局嵌套之高度自适应的更多相关文章

  1. flex 布局 input 宽度不自适应

    flex 布局 input 宽度不自适应 解决方法: 给 input 加上min-height 解决!

  2. flex布局 一侧固定宽度 一侧自适应

    想实现一个类似知乎个人主页的资料显示布局 类是下面这样 其中显示图片在一个div,Name和class和button在一个div中,使用justify-content: space-between; ...

  3. 使用flex布局解决百分比高度元素垂直居中

    方法一: align-self(解决父元素下面单个子元素布局方式) 父级加上 div{display:flex} 子元素 span { flex-grow: 1; align-self: center ...

  4. vue iframe嵌套页面高度自适应 (ios 宽度扩大的bug , ios展示比例问题)

    <template>   <div class="card-index pt-relative">     <div id="wrapper ...

  5. sticky footer 和 flex布局的原理

    Sticky footers设计是最古老和最常见的效果之一,大多数人都曾经经历过.它可以概括如下:如果页面内容不够长的时候,页脚块粘贴在视窗底部:如果内容足够长时,页脚块会被内容向下推送. 一.使用f ...

  6. 典型的DIV CSS三行二列居中高度自适应布局

    如何使整个页面内容居中,如何使高度适应内容自动伸缩.这是学习CSS布局最常见的问题.下面就给出一个实际的例子,并详细解释.(本文的经验和是蓝色理想论坛xpoint.guoshuang共同讨论得出的.) ...

  7. RecyclerFullyManagerDemo【ScrollView里嵌套Recycleview的自适应高度功能】

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 对于Recyclerview自己的LinearLayoutManager和GridLayoutManager,在版本23.2.0之后 ...

  8. [Swift通天遁地]二、表格表单-(3)在表格中嵌套另一个表格并使Cell的高度自适应

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...

  9. css--常见左右盒子高度自适应布局

    前言 前端开发工程师最基础的技能要求是根据 ui 设计稿还原网页,这就缺少不了必要的网页布局,首先看下最近小伙伴问我的一个问题,他说一个网页有左右两个部分,左右两个部分的高度都不固定,要使得右部分的宽 ...

随机推荐

  1. 解决由于服务器调用删除或添加字段后CXF客户端未更新导致异常问题org.apache.cxf.interceptor.Fault: Unmarshalling Error: Unexpected element

    采用CXF客户端调用Webservice服务,由于服务端时不时会对Webservice服务删除或添加一些字段,而CXF未及时更新客户端代码导致再次调用服务时报异常错误: Interceptor for ...

  2. 什么是pyc文件，Python

    pyc文件就是 Python 程序编译后得到的字节码文件 (py->pyc).pyc文件一般由3个部分组成:最开始4个字节是一个Maigc int, 标识此pyc的版本信息, 不同的版本的 Ma ...

  3. 996 icu我能为你做什么？

    今天996,未来icu 996icu地址:https://github.com/996icu/996.ICU 前段时间github上出现了,一个讨论996的项目,这个项目使中国的软件工程师达到了空前的 ...

  4. stylus含有的特性

    Stylus 冒号可有可无 分号可有可无 逗号可有可无 括号可有可无 变量 插值(Interpolation) 混合(Mixin) 数学计算 强制类型转换 动态引入 条件表达式 迭代 嵌套选择器 父级 ...

  5. Hadoop Mapreduce的shuffle过程详解

    1.map task读取数据时默认调用TextInputFormat的成员RecoreReader,RecoreReader调用自己的read()方法,进行逐行读取,返回一个key.value; 2. ...

  6. mysql左连接右连接（查询两张表不同的数据）

    有两张表:一张A表he一张B表 left join(左联接) 返回包括左表中的所有记录和右表中联结字段相等的记录 :right join(右联接) 返回包括右表中的所有记录和左表中联结字段相等的记录: ...

  7. Redis读超时排查

    现象:STORM UI中发现bolt中有failed,异常日志抛异常read time out 业务场景:storm读写redis. 查看redis日志发现,正常情况下 每隔2小时都会有超时的异常抛出 ...

  8. Mysql表结构导出excel（含数据类型、字段备注注释）

    SELECT   "列名",   "数据类型",     "字段类型",   "长度",  "是否为空&quo ...

  9. pytest学习--快速入门

    一.pytest简介 Pytest是python的一种单元测试框架. pytest的特点: 入门简单,文档丰富 支持单元测试,功能测试 支持参数化,重复执行,部分执行,测试跳过 兼容其他测试框架(no ...

  10. phpstudy设置允许远程访问mysql数据库

    1.先在服务器中通过命令行方式(打开phpstudy界面->右下角其他菜单选项->MySQL工具->MySQL命令行) 登录mysql:mysql   -u root -p 密码 ( ...