How to properly resize single row/column in flexbox

Here is what I have:

And here is what I need:

is there a way to set second item height to max window height without setting "height" property?

My code in 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>    );