今天在用微信小程序做flex布局的时候遇到了一些问题。
布局简单来说是这样的，最外层是一个flex布局属性为flex-direction:column的元素。里面有未设置height，并且flex-grow:1的子元素，然后在这子元素里，有一个孙子元素height:100%;
html代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<style>
html,
body {
height: 100%;
}
.a {
height: 100%;
100%;
background: red;
display: flex;
}
.b {
flex-grow: 1;
background: yellow;
}
.c {
height: 100%;
background: yellowgreen;
}
</style>
</head>
<body>
<div class="a">
<div class="b">
<div class="c">
</div>
</div>
</div>
</body>
</html>
在其他小程序安卓机和开发者工具中，这种代码可行的，能够撑满整个屏幕，在小程序的苹果真机和safair浏览器中，这样写会直接导致c（孙子）元素没有任何高度。
所以我们需要把b（儿子）元素设置为flex，然后把c元素设置为flex-grow:1，才能像我们预想的一样，撑满整个屏幕
css代码如下：
.b { flex-grow: 1; display: flex; background: yellow; } .c { flex-grow: 1; background: yellowgreen; }