查遍各大资源无任何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. 监控linux服务器是否能登陆 邮件报警

    import smtplibfrom email.mime.text import MIMETextimport telnetlibimport timedef SendEmail(fromAdd,t ...

  2. fdisk 分区及 swap

    使用虚拟机创建挂载点 一,创建 windows 硬盘        创建  

  3. asp.net core结合docker实现自动化获取源码、部署、更新

    之前入坑dotnet core,由于一开始就遇到在windows上编译发布的web无法直接放到centos上执行.之后便直接研究docker,实现在容器中编译发布.然后就越玩越大,后来利用git的ho ...

  4. 使用Java的URL/HttpURLConnection进行远程调用(POST请求)

    利用Java的HttpURLConnection进行远程url请求(调用远程接口) 测试类:请求类型为json,以post方式请求,利用OutputStream写入数据 实体类: public cla ...

  5. pyqt5 -——菜单和工具栏

    一. 状态栏 # -*- coding: utf-8 -*-# @Time : 2018/12/22 12:37# @Author : Bo# @Email : mat_wu@163.com# @Fi ...

  6. C#调用C++的DLL 尝试写入受保护的内存

    原因:C#中的声明函数的参数类型与C++的函数的参数类型不一致,在参照C#与C++的参数类型对照表以后,修改相应参数类型,问题解决

  7. ubuntu环境下安装docker遇到的坑

    ubuntu安装docker的前提条件是: 1. Linux 的内核版本在 3.10 或以上: 2. linux 内核要开启 cgroup 和 namespace 功能 可以执行命令:uname –a ...

  8. Jenkins问题笔记

    1.启动docker容器权限不足 通过如下命令启动docker容器后,使用命令"docker logs -f jenkins"查看jenkins容器日志, docker run - ...

  9. ipad忘记了锁屏密码，已经越狱了

    ipad忘记了锁屏密码,已经越狱了, 已经需要连接itunes了...要是恢复的话,好像就不能越狱了耶... 我叫什么好咧 | 浏览 3330 次  问题暂时关闭  推荐于2016-07-23 11: ...

  10. ActionScript3.0(AS3)中的泛型数组Vector

    Adobe官方并没有"泛型数组"的叫法,这是我自己对Vector的叫法(有点标题党),不过Vector在使用上确实跟c#中的泛型数组有些相似之处. 原作者:菩提树下的杨过出处:ht ...