微信小程序坑-子组件的外层容器百分之百无效

bug如下

<view class="wrapper">

<!-- tab导航栏 -->

<scroll-view class="tab" scroll-x="true">

<view wx:for="{ {menuList}}" wx:key="index" class="tab-item { {currentTab == index ? 'active' : ''}}"

data-current="{ {index}}" data-catid="{ {item.catid}}" bindtap='clickMenu'>{ {item.catname}}</view>

</scroll-view>

<view class='tab_btn' bindtap='showShopType'>

<view class='tab_btn_ico'>

<image mode='scallToFill' lazy-load='true' src='/imgs/tab_bt.png'></image>

</view>

</view>

</view>

.wrapper {

border: 1px solid red;

display: flex;

width: 100%;

box-sizing: border-box;

}

子组件的wrapper为100%时显示出来的效果却不是占满父元素的同宽，而是产生了间距
问题原因
子组件默认自带一个隐藏的page页面，这个隐藏的Page页面自带默认的最大宽，实际上100%是以这个默认的page的最大宽为基准
解决方法
获取父元素的模板