<!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. 013_go语言中的函数多返回值

    代码演示 package main import "fmt" func vals() (int, int) { return 3, 7 } func main() { a, b : ...

  2. 团队项目-记账App

    一.团队成员介绍 队长: 向瑜 博客园地址: https://www.cnblogs.com/xiangyu721/  沟通能力较强,善于总结,能够正确分配团队任务.其次,有耐心学习新事物,发现新问题 ...

  3. Spring IOC 原理深层解析

    1 Spring IOC概念认识 1.1 区别IOC与DI 首先我们要知道IOC(Inverse of Control:控制反转)是一种设计思想,就是 将原本在程序中手动创建对象的控制权,交由Spri ...

  4. Homekit_Dohome_智能灯带

    简介:本款产品支持音乐律动控制,可以随音乐改换颜色及频率,可以使用Homekit或者Dohome或者遥控器进行有效控制,同时Dohome App已经对接了各大智能音箱,下载Dohome App后就可以 ...

  5. java.lang.NoSuchFieldError: No static field XXX of type I in class Lcom/XX/R$id; or its superclasses

    报错: 当启动一个页面的时候报错: java.lang.NoSuchFieldError: No static field XXX of type I in class Lcom/XXX/R$id; ...

  6. dcoker 小应用(二)

    sudo yum install epel-release   vi /etc/yum.repos.d/epel.repo     use base url instead of mirror url ...

  7. Lambda 表达式推演全过程

    Java 的 Lambda 表达式推演过程: 第一步:正常的类实现(外部实现),new一个对象,然后重写方法实现 public class TestLambda3 { public static vo ...

  8. Java方法传参，测试在方法内部改变参数内容是否会影响到原值

    我分了三种类型的参数进行测试 一.基本类型 public static void main(String[] args) { System.out.println("验证基本类型int作为参 ...

  9. javaweb中自己遇到的问题

    1.web中的编码问题 1.1服务器接收的数据 post请求,请求会在Servlet中进行解码,所以我们只需要对request设置UTF-8即可. request.setCharacterEncodi ...

  10. ASP.NET Core3.1使用IdentityServer4中间件系列随笔（一）：搭建认证服务器

    配套源码:https://gitee.com/jardeng/IdentitySolution 1.创建ASP.NET Core Web应用程序,选择空模板. 去掉HTTPS 2.添加nuget包:I ...