native base card height not adjusting - css

Question

I have a card with 2 tabs inside. If one tab has more text than the other the height of the taller tab will be forced on to the shorter tab. Ideally, each card would have a fixed height and on more content, it would add a scroll bar instead of expanding the whole card.
Card code:
<Card style={HomeStyles.card}>
<Tabs initialPage={0} tabBarUnderlineStyle={{ backgroundColor: 'orange' }} onChangeTab={({ i }) => this.tabChanged(i)}>
<Tab heading={
<TabHeading style={{ backgroundColor: '#1f1e1e' }}>
<Icon type={this.props.iconType} name={this.props.iconName} style={HomeStyles.cardHeaderIcon} />
<Text>{this.props.tabName}</Text>
</TabHeading>} style={HomeStyles.cardBody}>
{this.props.mainTab}
</Tab>
<Tab heading={
<TabHeading style={{ backgroundColor: '#1f1e1e' }}>
<Icon type="FontAwesome" name="info-circle" style={HomeStyles.cardHeaderInfoTabIcon} />
<Text>Info</Text>
</TabHeading>} style={HomeStyles.cardBody}>
{this.props.infoTab}
</Tab>
</Tabs>
</Card>
// And styles
const HomeStyles = StyleSheet.create({
card: {
flex: 1,
marginLeft: 10,
marginRight: 10,
marginTop: 15,
marginBottom: 20,
borderRadius: 1,
borderWidth: 2,
borderColor: BackgroundColor,
},
cardHeader: {
backgroundColor: BackgroundColor,
height: 15
},
cardHeaderIcon: {
fontSize: 15,
color: '#ffa31a'
},
cardHeaderText: {
color: '#fff',
fontSize: 15,
},
cardHeaderInfoTabIcon: {
fontSize: 15,
color: '#70fff7'
},
cardBody: {
borderColor: '#ffa31a',
backgroundColor: BackgroundColor,
},
cardBodyText: {
alignItems: 'center',
color: '#fff',
fontSize: 12
},
cardButton: {
height: 25,
width: 100,
margin: 5, alignSelf: "center"
}
});