微信小程序父组件设置的样式对子组件无效

比如父组件设置了flex布局，子组件需要占满剩下的部分。

<!-- 父组件 -->
<view class="main">
  <view class="top"></view>
  <child></child>
</view>
page {
  width: 100%;
  height: 100%;

  .main {
    width: 100%;
    height: 100%;
    background: yellow;
    display: flex;
    flex-direction: column;
    .top {
      width: 100%;
      height: 300rpx;
      background: red;
    }
  }
}

<!-- 子组件 -->
<view class="child"></view>
.child {
  flex: 1;
  background: blue;
}

会出现这种情况：

解决方法

<child class="^main"></child>

<child class="~main"></child>

// 子组件
Component({
  options: {
    virtualHost: true
  }
})

效果

参考文档：
组件模板和样式 | 微信开放文档