<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Document</title>

  <style>

    .fa{

      display: flex;

      flex-flow: row nowrap;

      width: 300px;

      height: 100vh;

      border: 1px solid #000;

    }

    .fa .son1{

      /* 注意这里 son1是没有给高度的，但是son1后代demo1给了高度，son1的fa给了高度，

      那么，son1的高度完全由fa决定。

       */

      width: 100px;

      background: firebrick;

    }

    .fa .son1 .demo1{

      height: 2000px;

      width: 50px;

      background: darkgoldenrod;

    }

  </style>

</head>

<body>

  <div class="fa">

    <div class="son1">

      <div class="demo1"></div>

    </div>

  </div>

</body>

</html>

情况2：fa son1都没有给高度  demo1给了高度，最终fa son1的高度由demo1决定

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Document</title>

  <style>

    .fa{

      display: flex;

      flex-flow: row nowrap;

      width: 300px;

      /* height: 200px; */

      border: 1px solid #000;

    }

    .fa .son1{

      width: 100px;

      background: firebrick;

    }

    .fa .son1 .demo1{

      height: 200px;

      width: 50px;

      background: darkgoldenrod;

    }

  </style>

</head>

<body>

  <div class="fa">

    <div class="son1">

      <div class="demo1"></div>

    </div>

  </div>

</body>

</html>

flex 中间层的高度完全由flex元素决定的更多相关文章

  1. CSS中父元素高度没有随子元素高度的改变而改变，应该如何解决？

    如果子元素没有设置浮动(float),父元素实际上会根据内容,自动宽高进行适应的. 当子元素增加了浮动后,最简单的处理方法是给父元素添加overflow:hidden属性,此时父元素的高度会随子元素的 ...

  2. Flex 4 不同主题下容器子元素的管理方法

    Flex 下,容器主要分两类:Spark容器, Halo容器. Spark容器 Halo容器 说明 numElements numChildern 容器的子元素数量. addElement( ) ad ...

  3. 如何为不定高度(height:auto)的元素添加CSS3 transition-property:height 动画

    但一个元素不设置height时,它的默认值是 auto,浏览器会计算出实际的高度. 但如果想给一个 height:auto 的块级元素的高度添加 CSS3 动画时,该怎么办呢? 从 MDN 的可以查到 ...

  4. 父元素高度为auto,子元素使用top:-50%没有效果的问题

    无意间在实现元素垂直居中的一种方式测试到,当一个元素高度没有指定的情况下,其 postion:relative;top:-50%;无效 后来查阅w3c看到这样一句话: <percentage&g ...

  5. CSS中为什么有的元素能够设置高度，而有的元素却不能设置高度与宽度？

    可以使用{display:block}将内联元素变为块级元素,同时使用{display:inline}将块级元素变为内联元素. {display:inline-block}又是怎么回事,根据张鑫旭老师 ...

  6. flex的圣杯布局记录 （flex : 0 0 80px）

  7. CSS开发技巧（四）：解决flex多行布局的行间距异常、子元素高度拉伸问题

    在使用flex布局时,若出现换行,有两种较为特殊的现象是值得我们研究的: 子元素高度被拉伸,其实际高度大于它的内容高度. 各行子元素之间的行间距过大,甚至我们根本没有给子元素设置margin. 现在我 ...

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

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

  9. flex自适应高度内容高度超出容器高度自动出现滚动条的问题

    在容器中设置 flex-grow:2; overflow-y:auto;overflow-x:hidden;容器高度自适应. 内容高度不固定,无法出现滚动条,然后在容器中添加height:0,出现滚动 ...

随机推荐

  1. JAVA的基本程序设计结构<上>

    一个简单的Java应用程序 public class FirstSample { public static void main(String[] args) { System.out.println ...

  2. 全球疫情爬取APP版

    全球疫情统计APP图表展示: 将该任务分解成三部分来逐个实现: ①爬取全球的疫情数据存储到云服务器的MySQL上 ②在web项目里添加一个servlet,通过参数的传递得到对应的json数据 ③设计A ...

  3. puppet单机模型

    puppet配置 命令 facter -p: 显示所有的变量 puppet apply [-v] [--noop] [-e 'puppet expression: 一般为include httpd等' ...

  4. 谈下APP测试和WEB测试的区别

    先来讲下相同点: 1.都需要理论知识,相同的用例设计方法:边界值,等价类,错误推导法,场景法 2.同样的测试方法 验证功能是否满足需求 3.都需要检查UI  界面设计是否合理 4.性能检测  并发 吞 ...

  5. 智能问答中的NLU意图识别流程梳理

    NLU意图识别的流程说明 基于智能问答的业务流程,所谓的NLU意图识别就是针对已知的训练语料(如语料格式为\((x,y)\)格式的元组列表,其中\(x\)为训练语料,\(y\)为期望输出类别或者称为意 ...

  6. 每日一道 LeetCode (10)：搜索插入位置

    每天 3 分钟,走上算法的逆袭之路. 前文合集 每日一道 LeetCode 前文合集 代码仓库 GitHub: https://github.com/meteor1993/LeetCode Gitee ...

  7. Springboot日志LOGO改变和设计

    每次启动Springboot的时候,SpringBoot都会打印一个LOGO,那么这个LOGO是可以关闭和改变的. 1.关闭Springboot的LOGO 2.改变Springboot的日志LOGO ...

  8. 2020重新出发，JAVA语言，什么是JAVA？

    @ 目录 什么是 java? JAVA三大体系 Java SE Java EE JavaME java的主要特性和优势 1. 面向对象 2. 平台无关性 3. 可移植性 4. 简单性 5. 解释执行 ...

  9. C#LeetCode刷题-二叉搜索树

    二叉搜索树篇 # 题名 刷题 通过率 难度 220 存在重复元素 III   19.3% 中等 315 计算右侧小于当前元素的个数   31.9% 困难 327 区间和的个数   29.5% 困难 3 ...

  10. JavaScript promise基础示例

    const { info } = console // cooking function cook() { info('[COOKING] start cooking.') const p = new ...