Reactstrap的h-100样式渲染异常，如何让Row占满父Container高度？

问题根因 #

你给内部的Container设置flex-grow:1确实让它在父flex容器中占满了剩余高度，但默认的Container不是flex容器，且它的高度是flex布局动态分配的非固定值，子元素Row上的h-100基于百分比的高度计算无法识别这种动态高度，所以无法撑满。

解决方案 #

方案1（推荐，无需额外写CSS） #

给内部Container添加flex布局相关的Bootstrap工具类，同时调整Row的高度设置：

1. 给内部Container的className追加d-flex flex-column，将其设置为flex纵向布局容器
2. 把Row的h-100替换为flex-grow-1，让Row作为flex子项自动占满父容器的全部高度

修改后的JSX对应部分如下：

<Container className="flex-grow-1 pt-3 test d-flex flex-column">
  <Row className="flex-grow-1 test2">
    <Col md="2">
      <SideMenu />
    </Col>
    <Col md="10">
      {this.props.children}
    </Col>
  </Row>
</Container>

方案2（保留原有h-100设置） #

给内部Container的className追加h-0，让flex分配的高度可以被子元素的百分比高度识别，原有Row的h-100不需要修改：

<Container className="flex-grow-1 h-0 pt-3 test">
  <Row className="h-100 test2">
    <Col md="2">
      <SideMenu />
    </Col>
    <Col md="10">
      {this.props.children}
    </Col>
  </Row>
</Container>

两个方案都可以实现Row和父Container高度完全一致，修改后你可以通过test和test2的背景色确认效果。

内容的提问来源于stack exchange，提问作者Ham Dong Kyun