Space child components along full height of a fixed-height parent component - reactjs

Question

I am developing an app with a page that displays an overlay over a map. I want the view on this overlay to be scaled to a percentage of screen height (30%). I want the contents of this view to be flex elements that span its entire height.
This is my current implementation:
function MyOverlay () {
return (
<Overlay isVisible={true}>
<View id='container' style={{height: '30%', alignItems: 'stretch'}}>
<Text id='title' style={{flex: 1}, styles.titleText}>Menu</Text>
<View id='options' style={{flex: 3}}>
<Button containerStyle={{borderWidth: 2, flex: 1}}>
Option 1
</Button>
<Button containerStyle={{borderWidth: 2, flex: 1}}>
Option 2
</Button>
<Button containerStyle={{borderWidth: 2, flex: 1}}>
Option 3
</Button>
</View>
</View>
</Overlay>
);
};
In this implementation, container has height=30%, which is reflected in the screenshot below. I want the title and options child components to fill the entire parent height. After reading other answers, I added alignItems: 'stretch' to container. This isn't working as intended, as seen in the screenshot.
Any idea how I could get the behavior that I want?

Answer 1

I recreated your example in my own markup, and abstracted away the styles for readability. Most of the styles you can ignore, but the important stuff is:
On the parent container:
display: flex;
flex-direction: column;
On the option wrapper:
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
And that's it! No need to add any flex properties to the children.
.container {
border: 1px solid black;
height: 80%;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
flex-direction: column;
}
.wrapper {
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
<div class="container">
<h1>Menu</h1>
<div class="wrapper">
<button>Option 1</button>
<button>Option 2</button>
<button>Option 3</button>
</div>
</div>