如何在Flexbox中调整单个列高度至窗口最大高度（不使用height属性）

当前效果：

期望效果：

请问是否可以在不设置height属性的情况下，将第二个Flex项的高度设置为窗口最大高度？

我的React.js代码如下：

return (
    <div className="App" style={{ padding: "10px", border: "1px solid red", display: 'flex', flexDirection: 'row' }}>
        <div style={{padding: "10px", border: "1px solid green", width: "100%"}}> row 1</div>
        <div style={{padding: "10px", border: "1px solid blue", width: "100%"}}> row 2</div>
    </div>
);

可以实现，不用直接给子项设置height属性，按以下步骤调整：

1. 先给全局的html和body元素设置样式，让它们占满整个视口高度：

html, body {
  margin: 0;
  height: 100%;
}

（如果用React的CSS方案，比如styled-components或者CSS Modules，把这段加到全局样式文件里即可）

2. 修改你的App容器和第二个子项的样式：

return (
    <div className="App" style={{ 
        padding: "10px", 
        border: "1px solid red", 
        display: 'flex', 
        flexDirection: 'row',
        height: '100%', // 继承父级的视口高度，不是硬写固定值
        boxSizing: 'border-box' // 防止padding把容器撑大超出视口
    }}>
        <div style={{
            padding: "10px", 
            border: "1px solid green", 
            width: "100%"
        }}> row 1</div>
        <div style={{
            padding: "10px", 
            border: "1px solid blue", 
            width: "100%",
            flexGrow: 1 // 让这个子项自动填满容器剩余的高度
        }}> row 2</div>
    </div>
);

原理很简单：先让html和body撑满视口，App容器继承这个高度后，flex布局下给第二个子项加flexGrow:1，它就会自动占据容器里剩下的所有空间，间接实现了占满窗口最大高度的效果，全程没给子项设置固定height值。

内容的提问来源于stack exchange，提问作者John Glabb