div高度设置100%无效的问题 （亲身实践）

先上我的项目效果图：

这是没有加高度的

 

这是加了高度的 

 

今天写页面碰到了一个问题，div设置高度100%无效，于是进行检查。首先想到的是div父容器没有高度，于是检查父容器高度，通过谷歌开发者工具发现，父容器高度正常，那为什么元素高度无效呢。

然后我试着给父容器设置一个固定的高度，发现元素高度100%居然有效了，这是什么操作。废了半天劲，突然想到我的父容器处于flex布局下，父容器的高度是默认的auto，是不是这个原因呢？于是我给父容器手动设置height:1px;。发现元素的100%高度生效了！

看来，flex布局虽然使得容器有了高度，但是如果不给容器手动设置一个高度，子元素并不能使用百分比正确获取。