Dynamically Set the Height of an Element Based on It's Parent

There is not a great way to dynamically fill the vertical space in a parent element in CSS without setting a fixed height. To do this in React using flexbox, you need to get a reference to the parent element and calculate the height using a callback hook.

For example:

const [interiorHeight, setInteriorHeight] = useState<number>(0);
const measuredRef = useCallback((node) => {
  // Before the component mounts the node ref will be null
  if (node !== null) {
    setInteriorHeight(
      node.current.getBoundingClientRect().height
    );
  }
}, []);

return (
  <div ref={measuredRef} className="p-6 pt-10">
    <div className="flex items-center" style={{height: `${interiorHeight}px`}}>
      I'm {interiorHeight} pixels tall!
    </div>
  </div>
)