查遍各大资源无任何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. 新的blog站地址

    自己用Jekyll搭建了一个静态blog网站 以后的blog随笔就更新在:https:/blog.hudunsec.cn

  2. SockJS

    1\ 2\ 下载

  3. 安装FrameWork后重新注册IIS

    IIS和.netfw4.0安装顺序是从前到后,如果不小心颠倒了,无所谓. 打开程序-运行-cmd:输入一下命令重新注册IIS C:\WINDOWS\Microsoft.NET\Framework\v4 ...

  4. 我与OO （1）

    前言 “真正的勇士敢于面对惨淡的人生,敢于面对淋漓的鲜血” 我是谨慎拜读了鲁迅先生的名言,怀着崇敬的精神去接触这门课程的. 而当我真的经历了这门课程以后,我才发现,刘和珍君这样的觉悟,我们普通人,果然 ...

  5. jvm（一）类加载器

    1.jvm的生命周期结束的几种情况 a.执行了System.exit()方法 b.程序正常执行结束 c.程序在执行过程中遇到了异常或错误而异常终止 d.操作系统出现错误 2.类加载过程 加载:查找并加 ...

  6. kinect 深度图与彩色图对齐程序

    //#include "duiqi.hpp" #include "kinect.h" #include <iostream> #include &q ...

  7. python之元组及其方法---整理集

    元组: 区别:与列表类似,是对列表的二次加工:用小括号包括起来:元素不可修改:不可增加.删除 技巧:创建元组的时候,一般在最后一个元素后面加一个逗号:为了与方法区分:并且这个逗号不算元素例如: tu= ...

  8. sqlserver 收缩数据库/文件

    /******************************/ 1.右键-属性-选项-简单模式 2.右键-任务-收缩-文件 3.右键-任务-收缩-数据库 /********************* ...

  9. vue响应式原理

    vue的响应式,数据模型仅仅是普通的Javascript对象.当你修改它们时,视图会进行更新 那么如何追踪变化: 当把普通的js对象传给vue实例的data选项,Vue将遍历此对象的所有属性,并使用O ...

  10. Ubuntu---添加输入法

    摘要:Ubuntu 在刚刚安装好之后,默认是不支持直接输入中文的,所以我们需要安装支持中文的输入法.网络上面一般推荐使用的输入法是 Fcitx(小企鹅输入法),我们今天就来安装和配置它. step1: ...