查遍各大资源无任何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. sqoop 问题以及 小tips

    1. Sqoop import 任务里把原来NULL的转化成字符串‘null’了. 解决方法: 先: alter table ${table_name} SET SERDEPROPERTIES('se ...

  2. Python爬虫与数据分析之爬虫技能：urlib库、xpath选择器、正则表达式

    专栏目录: Python爬虫与数据分析之python教学视频.python源码分享,python Python爬虫与数据分析之基础教程:Python的语法.字典.元组.列表 Python爬虫与数据分析 ...

  3. Spring注解测试

    @RunWith(SpringJUnit4ClassRunner.class) @ContextConfiguration(locations = "classpath:applicatio ...

  4. winreg操作windows注册表详解示例

    #coding:utf-8 #=====================================================================#=====本程序演示了WINR ...

  5. Mac谷歌浏览器跨域

    1.创建一个文件夹,这个文件夹是用来保存关闭安全策略后的用户信息的,名字可以随意取,位置也可以随意放,我用的是MyChromeDevUserData open -n /Applications/Goo ...

  6. DEDECMS 多站用一个站图片

    function replaceurl($newurl) { $newurl=str_replace('src="/uploads/allimg/','src="xxx.com/u ...

  7. Python module ---- re

    Python 的 re 模块(Regular Expression 正则表达式)提供各种正则表达式的匹配操作,在文本解析.复杂字符串分析和信息提取时是一个非常有用的工具.python的re模块,在绝大 ...

  8. Ruby on Rails 开发笔记

    安装 Ruby on Rails Install Rails: A step-by-step guide 创建应用 # 创建新的应用程序 $ rails new blog $ cd blog # 启动 ...

  9. 使用pycharm 出现 interpreter field is empty 完美解决方法(转载 记录)

    使用pycharm 出现 interpreter field is empty 主要是因为你的电脑没有正确安装python或者安装python出错,重新下载安装覆盖就行 下载安装包:从Python的官 ...

  10. dev 控件的treelist

    最近项目中要求用dev 控件的treelist 树形控件. 如下图 要求如下: 1:选择父节点后,子节点全部打钩: 2:选择子节点而不选择父节点,则从当前节点的父节点一直到根节点check框都是半选状 ...