title: Height depends on the height of the other component React CSS
body: <p>I try to make a component that looks like this below. The red div has a constant <code>height: 70px;</code>, the green one has <code>height: 50px;</code> and <code>max-height: 150px;</code> and the blue one need to has <code>height</code> of the rest space. I tried something like this:</p>
  <pre><code>const input = useRef(null);
  return (
  &lt;Wrapper&gt;
      &lt;TopBar /&gt;
      &lt;BottomPanel inputHeight={input?.current?.style?.height}/&gt;
      &lt;WritePanel ref={input}/&gt;
  &lt;/Wrapper&gt;
  );
  </code></pre>
  <pre><code>const Wrapper = styled.div`
    height: 100%;
  `;
  
  const BottomPanel = styled.div`
    height: ${({ inputHeight }) =&gt;
      inputHeight ? `calc(100% - 70px - ${inputHeight})` : `calc(100% - 120px)`};
  `;
  
  const WritePanel = styled.div`
    min-height: 50px;
    max-height: 150px;
  `;
  </code></pre>
  <p>but it doesn't work. How can I do this correctly? I am using <code>React</code> and ```styled-components``.</p>
  <p><a href="https://i.stack.imgur.com/RpyEu.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/RpyEu.png" alt="enter image description here" /></a></p>