My flex boxes have the flex-direction set to row and align-items set to stretch. Despite setting align-self to stretch for the child boxes, they only fill the top part of the browser window. Can someone help me troubleshoot this issue?
#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>