查遍各大资源无任何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. 微信小程序代码大全 - 小程序开发福利

    小程序QQ交流群:131894955 小程序开发文档(Wepy) 小程序商城源码下载(weixin-app-shop) 小程序官网源码下载(weixin-app-cms) 微信管家平台JAVA版开源下 ...

  2. python之路：列表及元组之定义

      python开发之路:列表及元组之定义 列表是以后用处较大的一个数据类型,这种数据类型可以存储按组分类的信息.好了,我不多说,开始讲了! 好了,现在我有个情景,我要存东汉时期(韩国,秦国,……)所 ...

  3. Vue note

    1.npm run build 时,font:xx/xx "xxxx" 这种样式打包后会无效,只能写成font-size:xxx; line-height:xxx; font-fa ...

  4. Python 中文数字转阿拉伯数字

    #只能转数字,传参中包含非数字会错. def t(str): zhong={'零':0,'一':1,'二':2,'三':3,'四':4,'五':5,'六':6,'七':7,'八':8,'九':9}; ...

  5. Chrome添加Axure RP插件

    之前一直用 Firefox 浏览器浏览原型文件,一直用不惯,而且用 Firefox 的唯一目的就是看原型.其他都是用 Chrome 浏览器,来回切换,各种麻烦,然后下定决心解决 Chrome 浏览器无 ...

  6. 【转】使用TortoiseSVN搭建本地的版本控制库

    转:https://blog.csdn.net/chenyusiyuan/article/details/6925374 越来越发觉版本控制的重要性了,很惭愧到现在才真正开始落实~~~ 这里使用Tor ...

  7. 【转】How to initialize a two-dimensional array in Python?

    [wrong way:] m=[[element] * numcols] * numrows for example: >>> m=[['a'] *3] * 2>>> ...

  8. 查找运行时间超过1天的frmweb进程

    EBS中经常会出现一些zombie的frmweb进程,特征是运行时间很长,占用CPU都(1个frmweb进程占用1个CPU线程100%资源)下面脚本是利用awk找到运行时间超过1天的frmweb进程, ...

  9. webpack 4.0配置

    webpack一般是本地安装,一般安装webpack webpack-cli,一般是开发依赖上线的时候不需要打包通常npm install webpack webpack-cli  -D安装 安装的时 ...

  10. 求1!+2!+3!+......+n!的和 -----C++-----

    #include<iostream> using namespace std; int function(int x) { ; ;i<=x;i++) sum=sum*i; retur ...