Currently, I am working with a third-party component that utilizes display:flex. The component is functioning correctly in terms of its top position, but my objective is to have the bottom of the component remain fixed to the bottom of the browser window.
If you'd like to see the code, feel free to check it out here: https://codesandbox.io/s/18ox21zqm4
const App = () => (
<div>
<Menu fixed="top" inverted>
<Container>
<Menu.Item as="a" header>
Navbar
</Menu.Item>
<Menu.Item as="a">Home</Menu.Item>
</Container>
</Menu>
<div style={{ position: "fixed", top: "100px" }}>
<Header as="h1">Dynamic Height Content</Header>
<TextArea placeholder="This container height may grow or shrink based on content." />
<Segment style={{ backgroundColor: "red" }}>
<Grid>
This particular third-party component using display:flex should be positioned just below the above component's placement and have its bottom fixed to the bottom of the browser window (resizing accordingly).
</Grid>
</Segment>
</div>
</div>
);
render(<App />, document.getElementById("root"));
I attempted placing the component within a div with both top and bottom positions set to fixed. I utilized a reference to this div in order to capture the height and calculate the appropriate height for the flex component. However, the height gathered from the reference does not dynamically update upon window resizing, only after a browser page reload.
I am seeking advice on how best to achieve my desired outcome. Any suggestions would be greatly appreciated!