材质用户界面：将alignItems flex-end与flexGrow组合

Question

我正在使用flexGrow来实现AppBar按钮的正确对齐，类似于文档（https://material-ui.com/demos/app-bar/）中显示的示例。

但是我也遇到了另一个SO问题中显示的相同问题，其中不同大小的Typography条目在不同的垂直级别（Material UI: Place a space between two Typography components）对齐

但是，如果我从另一个SO问题中实现了<div style={{ display: "flex", alignItems: 'flex-end' }}>解决方案，那么flexGrow就会停止生效，并且该按钮将显示在文本旁边，如您在示例图像中看到的那样：< / p>

卸下<div style={{ display: "flex", alignItems: 'flex-end' }}>后，按钮位置正确，但较小的文本却不正确：

我的代码如下：

 <div style={flexGrowTest}>
      <AppBar>
         <Toolbar>
        <MuiThemeProvider theme={itsCustomTheme}>
        <div style={{ display: "flex", alignItems: 'flex-end' }}> // if this is removed, the button alighment is OK, but the small text appears in the middle vertically 
        <Typography variant="h2" color="inherit">
            {pageTitle}
        </Typography>
        <Typography variant="h5" color="inherit" style={flexGrowTest}>
            {pageSubtitle}
        </Typography>
        </div>
        </MuiThemeProvider>
        <IconButton color="inherit" disabled={this.state.disableIconButton}>
            <Badge badgeContent={this.state.selectedImagesCount} color="secondary" invisible={this.state.hideDownloadBadge}>
            <SaveAlt />
            </Badge>
         </IconButton>
         </Toolbar>
      </AppBar>
    </div>