微信小程序开发：控件为什么顶不到头？

[litsnake]

微信小程序测试，不知道怎么回事，控件就是死活顶不到最上面，如下图：


代码如下：

/* FileList.wxss */
page{
  height:100%;width: 100%;
  
}
.container{
  width: 100%;height:100%;background-color:aqua;
}

.checkbox-group{
  font-weight:150;font-size:small;background-color: red;
  width: 100%;height:100%;
}

.checkbox {
  font-weight:150;color: #888;align-items:flex-start;display:flex;
}

<!--FileList.wxml-->
<text>/</text>
<view class="container" >
  <checkbox-group bindchange="checkboxChange" class="checkbox-group">
    <label class="checkbox" wx:for="{{FileLists}}">
      <checkbox value="{{item.ID}}" />{{item.FileName}}   
    </label>
  </checkbox-group>
</view>

我的问题：
1.为什么红色的checkbox-group，顶不到头？
2.为什么红色的checkbox-group，设置了width: 100%;height:100%;，为什么height:100%不起作用？
非常感谢各位高手指点！

[litsnake]

这个没有人吗？顶一下

[litsnake]

@weixin_35599562

[luxinying303]

不清楚，谢谢！

[JohnnyLiao_WJ]

或者设置: display: flex; flex-direction: vertical; align-items: flex-start;

[JohnnyLiao_WJ]

因为微信自定义的样式是让它居中的， 你可以看到有这样的样式： flex: 1; align-item: center; 你可以显式的设置它： .check-group{ position: absolute; top: 0; }

[每天进步一點點]

你可以查看上级wxss文件（app.wxss）新版本的开发工具默认设置了一个rpx为200的padding 你取消掉就好了。

[qq_43306437]

本来都关上页面了，想想还是回来给楼主点个赞，感谢