Height depends on the height of the other component React CSS

Question

I try to make a component that looks like this below. The red div has a constant height: 70px;, the green one has height: 50px; and max-height: 150px; and the blue one need to has height of the rest space. I tried something like this:

const input = useRef(null);
return (
<Wrapper>
    <TopBar />
    <BottomPanel inputHeight={input?.current?.style?.height}/>
    <WritePanel ref={input}/>
</Wrapper>
);

const Wrapper = styled.div`
  height: 100%;
`;

const BottomPanel = styled.div`
  height: ${({ inputHeight }) =>
    inputHeight ? `calc(100% - 70px - ${inputHeight})` : `calc(100% - 120px)`};
`;

const WritePanel = styled.div`
  min-height: 50px;
  max-height: 150px;
`;

but it doesn't work. How can I do this correctly? I am using React and ```styled-components``.

Answer 1

Did you try flexbox? By using flex grow you can do this.

.wrapper {
  display: flex;
  flex-direction: column;
  height: 500px;
  width: 200px;
}

.top-bar {
  height: 70px;
  background: red;
}

.bottom-panel {
  flex-grow: 1;
  background: blue;
}

.write-panel {
  min-height: 50px;
  max-height: 150px;
  background: green;
  padding: 10px;
}

<div class="wrapper">
  <div class="top-bar"></div>
  <div class="bottom-panel"></div>
  <div class="write-panel"></div>
</div>