今天在用微信小程序做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%;
width: 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; }