父子两个组件，父组件的flex，无法影响子组件的flex-grow，使用:host依然无效

[MuJinYan]

问题描述
建立了两个独立的组件，且所有代码全部分离，在父组件中使用display: flex，在子组件中使用了flex-grow:1。但子组件却未撑满屏幕，同样的代码，我将子组件的布局代码完全移动到父组件内直接书写，子内容可以完全撑满页面。根据微信开发者工具渲染出来的wxml可以看出，当采用父组件嵌套子组件的时候，结构为

而当我将子组件的代码直接复制到父组件下，结构为

因为第一张图的渲染情况，造成我采用:host{flex-grow: 1}也无法生效
复现步骤*
[复现问题的步骤]

// 父组件
render () {
    return <View
      className={classNames(styles.layer, 'layer-class', { [styles.transparent]: this.props.transparent })}
      style={R.defaultTo({}, this.props.style)}
    >
      {this.props.children}
    </View>
  }
// scss
.layer {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  z-index: 100;
}
// 子组件
<View className={styles.content}>
      <View className={styles.contentChild}>
        {this.props.children}
      </View>
    </View>
// scss
:host {
  flex-grow: 1;
}
.content {
  flex-grow: 1;
  position: relative;
}
.contentChild {
  position: absolute;
  width: 100%;
  height: 100%;
  background: red;
}
``

**系统信息**
 - 操作系统: mac
 - Taro 版本 1.2.26
 - Node.js 版本 8.12.0
 - 报错平台 weapp

[taro-bot]

欢迎提交 Issue~

如果你提交的是 bug 报告，请务必遵循 Issue 模板的规范，尽量用简洁的语言描述你的问题，最好能提供一个稳定简单的复现。🙏🙏🙏

如果你的信息提供过于模糊或不足，或者已经其他 issue 已经存在相关内容，你的 issue 有可能会被关闭。

Good luck and happy coding~

[Chen-jj]

@MuJinYan https://nervjs.github.io/taro/docs/component-style.html#%E5%85%A8%E5%B1%80%E6%A0%B7%E5%BC%8F%E7%B1%BB

[taro-bot]

Hello~

您的问题楼上已经有了确切的回答，如果没有更多的问题这个 issue 将在 15 天后被自动关闭。

如果您在这 15 天中更新更多信息自动关闭的流程会自动取消，如有其他问题也可以发起新的 Issue。

Good luck and happy coding~

[jeekliang]

问题描述
建立了两个独立的组件，且所有代码全部分离，在父组件中使用display: flex，在子组件中使用了flex-grow:1。但子组件却未撑满屏幕，同样的代码，我将子组件的布局代码完全移动到父组件内直接书写，子内容可以完全撑满页面。根据微信开发者工具渲染出来的wxml可以看出，当采用父组件嵌套子组件的时候，结构为

而当我将子组件的代码直接复制到父组件下，结构为

因为第一张图的渲染情况，造成我采用:host{flex-grow: 1}也无法生效
复现步骤*
[复现问题的步骤]

// 父组件
render () {
    return <View
      className={classNames(styles.layer, 'layer-class', { [styles.transparent]: this.props.transparent })}
      style={R.defaultTo({}, this.props.style)}
    >
      {this.props.children}
    </View>
  }
// scss
.layer {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  z-index: 100;
}
// 子组件
<View className={styles.content}>
      <View className={styles.contentChild}>
        {this.props.children}
      </View>
    </View>
// scss
:host {
  flex-grow: 1;
}
.content {
  flex-grow: 1;
  position: relative;
}
.contentChild {
  position: absolute;
  width: 100%;
  height: 100%;
  background: red;
}
``

**系统信息**
 - 操作系统: mac
 - Taro 版本 1.2.26
 - Node.js 版本 8.12.0
 - 报错平台 weapp

问题描述
建立了两个独立的组件，且所有代码全部分离，在父组件中使用display: flex，在子组件中使用了flex-grow:1。但子组件却未撑满屏幕，同样的代码，我将子组件的布局代码完全移动到父组件内直接书写，子内容可以完全撑满页面。根据微信开发者工具渲染出来的wxml可以看出，当采用父组件嵌套子组件的时候，结构为

而当我将子组件的代码直接复制到父组件下，结构为

因为第一张图的渲染情况，造成我采用:host{flex-grow: 1}也无法生效
复现步骤*
[复现问题的步骤]

// 父组件
render () {
    return <View
      className={classNames(styles.layer, 'layer-class', { [styles.transparent]: this.props.transparent })}
      style={R.defaultTo({}, this.props.style)}
    >
      {this.props.children}
    </View>
  }
// scss
.layer {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  z-index: 100;
}
// 子组件
<View className={styles.content}>
      <View className={styles.contentChild}>
        {this.props.children}
      </View>
    </View>
// scss
:host {
  flex-grow: 1;
}
.content {
  flex-grow: 1;
  position: relative;
}
.contentChild {
  position: absolute;
  width: 100%;
  height: 100%;
  background: red;
}
``

**系统信息**
 - 操作系统: mac
 - Taro 版本 1.2.26
 - Node.js 版本 8.12.0
 - 报错平台 weapp

你解决这个问题了吗，试了上面提供的方法，不可以

[Chen-jj]

@MuJinYan 你怎么用的，提供一下代码。

[MuJinYan]

这个问题不是全局样式或外部样式的问题，全局样式或外部样式是针对于子组件的ui来源于其他地方的wxss的类名，这个问题实际来源于在渲染时子组件的所有标签代码默认规到了父组件的内部代码中，而不是采用正常的组件渲染代码(也就是外部没有在套一层默认的组件名标签)，所以:host无效。而这种情况我又期待父组件的display:flex可以直接影响子组件的flex:1。但结果为无效。

[MuJinYan]

@Chen-jj 稍等，我需要完成一份最简复现此问题的代码。

[MuJinYan]

@Chen-jj

 //父组件
import Taro, { Component } from '@tarojs/taro'
import * as R from 'ramda'
import { View } from '@tarojs/components'
import PropTypes from 'prop-types'
import classNames from 'classname'
import { onSomething } from '@/utils/helpers'
import styles from './index.module.scss'

export default class Layer extends Component {
  static externalClasses = ['layer-class']
  
  static propTypes = {
    style: PropTypes.object,
    transparent: PropTypes.bool,
    onClick: PropTypes.func
  }
  
  static defaultProps = {
    transparent: false,
    style: {},
    onClick: onSomething
  }
  
  render () {
    return <View
      className={classNames(styles.layer, 'layer-class')}
      style={R.defaultTo({}, this.props.style)}
    >
      {this.props.children}
    </View>
  }
}

@import "../../styles/mixin.module.scss";

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

// 子组件
import Taro, { Component } from '@tarojs/taro'
import { View } from '@tarojs/components'
import PropTypes from 'prop-types'
import { onSomething } from '@/utils/helpers'
import styles from './index.module.scss'

export default class Content extends Component {
  static options = {
    addGlobalClass: true
  }

  static propTypes = {
    onClick: PropTypes.func
  }

  static defaultProps = {
    onClick: onSomething
  }

  render () {
    return <View className={styles.content}>
      <View className={styles.contentChild} onClick={this.props.onClick}>
        {this.props.children}
      </View>
    </View>
  }
}

@import "../../styles/mixin.module.scss";

:host {
  flex-grow: 1;
}
.content {
  width: 100%;
  flex-grow: 1;
  position: relative;
}
.contentChild {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: red;
}

// 调用
import Taro, { Component } from '@tarojs/taro'
import { View } from '@tarojs/components'
import Layer from '../../components/Layer/Layer'
import Content from '../../components/Content/Content'

export default class Test extends Component {
  config = {
    navigationBarTitleText: '测试',
  }
  componentDidMount = () => {
  }

  render () {
    return (
      <Layer>
        <Content>
          <View>我是一段测试文字</View>
        </Content>
      </Layer>
    )
  }
}

[YunShengTeng]

结论是什么，没有下文了？