In my layout, I have a column on the right with <IndustryList />, and I want everything in the other <div> that contains <ParameterAndPostSearch /> and <SocialPostList /> to extend to the bottom. However, no matter what I try, setting height: 100% doesn't make it extend all the way down. Here is an image for reference:
Here's an excerpt from the relevant Component code in ReactJS: I've simplified everything for clarity, and I'm using Tachyons CSS for styling.
render() {
return (
<div className='flex'>
<div className='flex fixed width-235-px height-100'>
<IndustryList />
</div>
<div className='margin-L-235px height-100'> // this height isn't taking effect
<div className=''>
<ParameterAndPostSearch />
</div>
<div className='flex'>
<SocialPostList />
</div>
</div>
</div>
)
}
The <SocialPostList /> component structure:
return (
<div className='flex'>
<div className='flex-auto'>
<h4>Available Parameters:</h4>
<PostListArray />
{this.props.allSocialPostsQuery.allSocialPosts.map((socialPost, index) => (
<SocialPost />
))}
<div>
<form>
<input />
</form>
<button>Submit</button>
</div>
</div>
<div className='background-black width-350-px height-100'>
</div>
</div>
)
Update: I have resolved the issue... I realized that having fixed and absolute positioning was causing unwanted scrollbars. Additionally, studying and mimicking the flexbox layout demonstrated in this example helped me a lot in fixing the layout. It took some time but now everything works as intended.