How to let a component occupy 100% of the remaining height

Question

I’m trying to get this pink rectangle to occupy the rest of the screen, more specifically... responsive height, tried some shapes, but unsuccessfully. How to proceed?

OBS: I’m using the Styled-Components

index js.

return(
    <Container showsVerticalScrollIndicator={false}>
      <ContainerValue>

      </ContainerValue>

        <ContainerRun>
          <Output>

          </Output>

          <Output>
            
          </Output>

          <ContainerButton>
            <ButtonInit>

            </ButtonInit>
          </ContainerButton>
          
        </ContainerRun>
    </Container>
  );

Styles.js

export const Container = styled.ScrollView`
  flex: 100%;
  background-color: ${colors.greyRegular};
  padding-left: 15px;
  padding-right: 15px;
`;

export const ContainerValue = styled.View`
  width: 55%;
  height: 140px;
  border-radius: 10px;
  align-self: center;
  margin-top: 25px;
  background-color: ${colors.white};
`;

export const ContainerRun = styled.View`
  width: 100%;
  border-radius: 10px;
  align-self: center;
  margin-top: 50px;
  margin-bottom: 15px;
  background-color: pink;
`;

export const Output = styled.View`
  width: 90%;
  height: 50px;
  border-radius: 10px;
  align-self: center;
  margin-top: 50px;
  background-color: ${colors.greyRegular};
`;
export const ContainerButton = styled.View`
  flex: 100%;
  justify-content: flex-end; 
`;

export const ButtonInit = styled.TouchableOpacity`
  width: 250px;
  height: 80px;
  border-radius: 10px;
  align-self: center;
  margin-bottom: 15px;
  background-color: ${colors.yellowRegular};

`;

Answer 1

For the rectangle to occupy a space defined by height: 100% or any other value, it is necessary that the block containing it also has a defined height, whatever it is. Would that be:

<content-wrapper>
  <box></box>
</content-wrapper>

And the style

content-wrapper { height: 400px; }
box { height: 100% }

You can also use Flex to make sure the height works well.

.container {
    display: flex;
    flex-direction: column;
    background-color: #ddd;
    padding-left: 15px;
    padding-right: 15px;
    height:100vh;
}

.containerValue {
    width: 55%;
    height: 140px;
    border-radius: 10px;
    align-self: center;
    margin-top: 25px;
    background-color: white;
}

.containerRun {
    flex-grow: 1;
    width: 100%;
    border-radius: 10px;
    align-self: center;
    margin-top: 50px;
    margin-bottom: 15px;
    background-color: pink;
}

    <div class="container">
        <div class="containerValue">
  
        </div>
  
        <div class="containerRun">
            
        </div>
    </div>

I converted it to pure html/css and only touched the part that modifies the height of the boxes.