vertically stretch child flex boxes for which main axis is horizontal

Question

I have flex boxes for which flex-direction is row and align-items is stretch. I also want these boxes to fit browser height and I set align-self to stretch for child boxes. But they still fill only top part of browser window. Could you please help to solve this?

#containerDiv {
  display: flex;
  align-items: stretch;
  flex-direction: row;
  background: #FFFFFF;
}

#leftDiv {
  flex-grow: 50;
  align-self: stretch;
  background: linear-gradient(180deg, #FFFFFF 0%, #F2F5FA 100%);
}

#rightDiv {
  flex-grow: 50;
  align-self: stretch;
  background: url('https://c.files.bbci.co.uk/12A9B/production/_111434467_gettyimages-1143489763.jpg');
  background-repeat: no-repeat;
  background-size: auto auto;
}

<div id="containerDiv">
  <div id="leftDiv">
    <p>some text</p>
  </div>
  <div id="rightDiv">
    <p>some text</p>
  </div>
</div>

Answer 1

I figured out, for parent flexbox it should be 100vh height