My application consists of two containers. One container is a ReactPrismEditor, while the other is simply a container displaying text.
However, I am facing an issue where the height of the second container does not adjust according to the content inside the first container:
https://i.sstatic.net/zIJAJ.png
Initially, both containers are set to 100vh height. When the content in the first container exceeds this height, the second container should adjust accordingly.
The structure of my code looks like this:
return (
<AppContainer>
<FirstContainer>
<ReactPrismEditor
...
/>
</FirstContainer>
<SecondContainer>
...
</SecondContainer>
</AppContainer>
);
And here is the CSS I have applied:
const FirstContainer = styled.div`
width: 50%;
height: 100vh;
`
const SecondContainer = styled.div`
width: 50%;
height: 100vh;
`
const AppContainer = styled.div`
display: flex;
width: 100vw;
background:#272822;
`
I have tried several solutions including setting heights and positions for the second container, but none seem to work.
- Tried setting
{ height: 100%; }for SecondContainer, - Tried setting
{ height: auto; }for SecondContainer, - Tried setting
for SecondContainer{ position: relative; min-height: 100vh; height: 100%; } - Tried setting
{ position: sticky; }for SecondContainer
None of these solutions yielded the desired result. Any suggestions on how to resolve this issue would be greatly appreciated.
Unfortunately, due to technical difficulties, I am unable to provide a live demo in a code snippet editor.
For further reference, you can inspect the problem area in the following image:
https://i.sstatic.net/XQO2Q.png
UPDATE
I have managed to create a code sandbox with my code. However, due to limitations, the prism editor is not included, resulting in incorrect stretching of the first column. Nonetheless, it may still help identify the issue: https://codesandbox.io/s/smoosh-cherry-7titw?file=/src/App.js