I'm currently working on a React project where I need to conditionally display a div above an existing one that covers the screen with an image. My goal is to have the existing div shrink in height, reducing the size of the image when the second div is displayed. The height of the second div may vary, such as when displaying a list of items.
Here's a simplified version of my current setup in the App:
function App() {
const [show, setShow] = useState(false);
return (
<div
style={{
border: "solid",
width: "100%",
maxHeight: "100vh"
}}
>
{show && (
<div>
<div style={{ height: "300px", backgroundColor: "red" }}></div>
<button
onClick={() => {
setShow(false);
}}
>
Close
</button>
</div>
)}
<div
style={{
display: "flex",
justifyContent: "center"
}}
>
<img
src="https://i.imgur.com/LiAUjYw.png"
alt="test"
style={{
maxWidth: "100%",
height: "auto"
}}
/>
</div>
<button onClick={() => setShow(true)}>SHow</button>
</div>
);
}
Originally, it appears like this: https://i.sstatic.net/GrD8C.jpg
Then, upon clicking the 'Show' button, it changes to this: https://i.sstatic.net/4S6ic.jpg
You can observe that the bottom div shifts down and extends beyond the container div.
I'm seeking advice on how to create responsive styling so that the div adjusts its height when the other element is rendered. Any suggestions or assistance would be greatly appreciated.
Thank you.