在flex-direction: column子元素里直接使用height：100%，height并不会被设置成100%

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

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

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

    .height-500-px {

        height: 500px;

    }

    .height-100-per {

        height: 100%;

    }

    .bg-gray {

        background: gray;

    }

    .bg-yellow {

        background: yellow;

    }

    .flex-column {

        display: flex;

        flex-direction: column;

    }

    .flex-grow-1 {

        flex-grow: 1;

    }

    </style>

</head>

<body>

    <div class="flex-column height-500-px bg-gray">

        <div class="flex-grow-1">

            <div class="height-100-per bg-yellow"></div>

        </div>

    </div>

</body>

</html>

解决办法是在flex-grow-1这一层再加一个flex row

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

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

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

    .height-500-px {

        height: 500px;

    }

    .height-100-per {

        height: 100%;

    }

    .bg-gray {

        background: gray;

    }

    .bg-yellow {

        background: yellow;

    }

    .bg-blue {

        background: blue;

    }

    .flex-column {

        display: flex;

        flex-direction: column;

    }

    .flex-grow-1 {

        flex-grow: 1;

    }

    .flex-column-row {

        display: flex;

        flex-direction: row;

    }

    </style>

</head>

<body>

    <div class="flex-column height-500-px bg-gray">

        <div class="flex-grow-1 flex-column-row">

            <!-- 注意不要加height:100% -->

            <div class="bg-yellow flex-grow-1 height-100-per"></div>

        </div>

        <div class="flex-grow-1 flex-column-row">

            <div class="bg-blue flex-grow-1"></div>

        </div>

        <div class="flex-grow-1 flex-column-row" style="overflow:hidden"> <!-- 为了防止内部的内容撑大，加上overflow:hidden -->

            <div class="flex-grow-1">

                <!-- 里面一层加height:100%是可以的 -->

                <div class="bg-yellow height-100-per"></div>

            </div>

        </div>

    </div>

</body>

</html>

从以上情况可以大致推测

flex-column子元素的height:100%会优先于flow布局来计算高度，所以直接在flex-column子元素设height:100%没有效果，因为在计算height:100%的时候，高度为0

使flex-direction: column的子元素height: 100%生效的办法的更多相关文章

  1. 使min-height子元素height百分比生效的2种方式

    方式1,使用flex <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

  2. 父元素设置min-height子元素设置100%问题

    问题:父元素设置min-height子元素高度设置100%取不到值,这是因为子元素 div设置 height:100%: 只有当父级元素满足min-height:1000px;设置的条件才触发: 浏览 ...

  3. 让height: 100%生效

    html: <body> <div class="box"></div> </body> css: .box{ position: ...

  4. html元素height(width)是怎么确定的？

    1.若height是确定的(比如height:100px),则height直接可确定(还受min-height,max-height影响,见height,min-height,max-heigth的作 ...

  5. 深入理解CSS系列（二）：为什么height:100%不生效？

    对于height属性,如果父元素height为auto,只要子元素在文档流中(即position不等于fixed或者absolute),其百分比值完全就被忽略了.这是什么意思呢?首先来看个例子,比如, ...

  6. chrome 49 版本bug: flex父元素设置flex:1 , 子元素用height:100%无法充满父元素

    1 <div class="container"> <div class="item"> <div class="ite ...

  7. html中设置height=100%无效的问题

    设置height=100%(网页内容能够更好的适配各种屏幕大小) 第一种是设置某个单独的div元素   height=100%无效 原因很简单,所有基于本分比的尺寸必须基于父元素,而你如果没有设置父元 ...

  8. 【转载】设置event.cancelBubble，使触发子元素的onclick不同时触发父元素的onclick

    由于HTML中的对象都是层次结构,比如一个Table包含了多个TR,一个TR包含了多个TD Bubble就是一个事件可以从子节点向父节点传递,比如鼠标点击了一个TD,当前的event.srcEleme ...

  9. css使子元素在父元素居中的各种方法

    html结构: <div class="parent"> <div class="child"></div> </di ...

随机推荐

  1. 深度优先搜索(DFS) — 20180926

    用DFS的场景: 找出所有方案:DFS找出所有方案总数 可能是动态规划 DFS时间复杂度:答案个数*构造每个答案的时间 动态规划时间复杂度:状态个数*计算每个状态时间 二叉树时间复杂度:节点数*处理每 ...

  2. Python入门笔记——（2）列表和元组

    一.序列 python包含6种内建的序列:列表.元组.字符串.Unicode字符串.buffer对象和xrange对象.序列中每个元素被分配一个序号即索引,第一个索引为0,第二个为1,以此类推.也可以 ...

  3. JMS介绍

    JMS简单描述: JMS即Java消息服务(Java Message Service),是一个Java平台中面向消息中间件的API,用于在两个应用程序之间或分布式系统中发送.接受消息,从而进行异步通信 ...

  4. oracle 单实例DG(切换篇三)

    一,开篇 此篇操作承接上文,必须完成DG实例搭建完成方可有执行以下内容的实例 二,切换物理备库 one. oracle01库命令 select switchover_status from v$dat ...

  5. vue中src下的assets文件与static文件的几点区别

    区别一: assets文件时src下的,所以最后运行时需要进行打包:而static文件不需要打包就直接放在最终的文件中了. 区别二: assets中的文件在.vue中的template/style下用 ...

  6. 深入浅出理解linux inode结构

    一.inode是什么? 参考文档:http://tech.diannaodian.com/dw/lin/2012/0112/154629.html 做Android底层驱动或者嵌入式Linux的程序猿 ...

  7. Beyond Compare 4试用期已过

    Beyond Compare 很好用,但是只有一段时间的试用时间,当试用期过了之后就提示不能试用了 怎么办呢? 我在网上找到了两个方法: 1.直接用注册码(来自:https://blog.csdn.n ...

  8. 深入理解JavaScript系列（7）：S.O.L.I.D五大原则之开闭原则OCP

    前言 本章我们要讲解的是S.O.L.I.D五大原则JavaScript语言实现的第2篇,开闭原则OCP(The Open/Closed Principle ). 开闭原则的描述是: Software ...

  9. SQL Server 数据库定时自动备份（转）

    本文转载自:http://www.cnblogs.com/zhangq723/archive/2012/03/13/2394102.html 作者:清风寻梦 在SQL Server中出于数据安全的考虑 ...

  10. 1.浅析Hadoop之HDFS

    HDFS ,Hadoop Distribute File System,hadoop分布式文件系统. 主从架构,分主节点NameNode,从节点DataNode.当然还有个SecondaryName, ...