<!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. Html视频播放同时获取当前帧下的图片

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. Netty(一)：的入门使用。

    Netty的入门基本使用流程代码,不做具体分析.使用版本为Netty 4.x版本. 服务端调用示例: 绑定端口号为8080端口 package com.cllover; import com.sun. ...

  3. JS 鼠标放上去滑出内容案例

    .sliderbar { width: 200px; height: 40px; position: relative; margin: 0 auto; } .sliderbar span { dis ...

  4. GitLab 转让所有者权限

    GitLab 转让所有者权限 没有查看文档,自己测试了一下,可能会有纰漏,谨慎阅读 私人项目的所有者 私人项目没有所有者权限,可以认为项目命名空间就是所有者. 私人项目http://xxxxxxxxx ...

  5. Docker 搭建 RabbitMQ

    Docker RabbitMQ RabbitMQ 安装非常繁琐,使用 Docker 快速搭建一个 RabbitMQ 开发环境 步骤 拉取镜像 docker pull rabbitmq 启动容器 端口会 ...

  6. pytorch载入模型的参数总是变化，比如说某个conv(3,3)kernel的几个参数总是变化：

  7. 【模式识别与机器学习】——SVM举例

  8. 【Mysql】SpringBoot_2.1.0+Druid_1.1.10 配置数据源监控服务Yml格式

    访问地址:localhost:8080/druid 按照这个方法和版本配置没问题 版本或高或低可能会出现不兼容 1.添加依赖 <dependency> <groupId>com ...

  9. 为什么我们需要Q#？

    原文地址:https://blogs.msdn.microsoft.com/visualstudio/2018/11/15/why-do-we-need-q/ 本文章为机器翻译. 你可能熟悉微软量子的 ...

  10. （Filter + Listener ）Day18

    Filter过滤器 filter是对客户端访问资源的过滤,符合条件的放行,不符合的不放行,并且可以对目标资源访问前后进行逻辑处理. 设置步骤 创建类实现Filter接口 在 doFilter 方法中编 ...