微信小程序设置百分比无效 height: 100%

• 我的需求：container容器下两个子容器在页面垂直1：1
• 代码及错误分析

<view class="container">
  <view class="view1">1</view>
  <view>2</view>
</view>

.container{
  display: flex;
  flex-direction: column;
  height: 100%;
}
.container view{
  flex: 1;
}
.view1{
  background: #f3f6fe;
}

实际效果

错误原因：百分比一定要有一个参照物，那就是它的父元素，且父元素要设置宽高才能取百分比，而container容器的父亲元素page没有设置宽高(类似html中的body)，所以container设置百分比就属于失效的

• 解决方法

1. 方法一：设置父元素page的宽高

page{
  height: 100%;
}
.container{
  display: flex;
  flex-direction: column;
  height: 100%;
}

2. 方法二：直接在container里写上position:absolute也会有一样的效果，因为absolute是根据已定位的父元素设置位置的，还省了特意写一个page

.container{
  position:absolute;
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}