CODEWITHSUNDEEP
reactjsreact-native
Morgan
Morgan

Reputation: 163

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

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.

App View

Any idea how I could get the behavior that I want?

Upvotes: 0

Views: 852

Answers (1)

PsiKai
PsiKai

Reputation: 1978

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>

Upvotes: 1

Related Questions