CODEWITHSUNDEEP
cssreactjsflexbox
Kevin Danikowski
Kevin Danikowski

Reputation: 5176

Flexbox css get height 100%

I have a column on the right <IndustryList />, and I want everything in the other <div> containing the <ParameterAndPostSearch /> and <SocialPostList /> to extend to the bottom, however I can't get it to extend to bottom even with height: 100%. Here is the image:

enter image description here

Here is the relevant Component from ReactJS code: I've heavily simplified anything that shouldn't be of an issue. I'm using Tachyons CSS, but it should be self explanatory (I can add CSS if not)

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 doing anything
                <div className=''>
                    <ParameterAndPostSearch />
                </div>
                <div className='flex'>
                    <SocialPostList />
                </div>
            </div>
        </div>
    )
}

The <SocialPostList /> just for reference:

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>
)

Figured it out! Update... All the fixed and absolutes were causing scroll bars in areas that shouldn't have them. Also, I went through and mimiced the flexbox layout found here https://jsfiddle.net/MadLittleMods/LmYay/ and it helped a ton. So took a while but I fixed it all.

Upvotes: 0

Views: 391

Answers (1)

ravo10
ravo10

Reputation: 963

I have not used Tachyon CSS, but this is what is written in the docs:

/* Height Percentages - Based off of height of parent */
.h-25 { height: 25%; }
.h-50 { height: 50%; }
.h-75 { height: 75%; }
.h-100 { height: 100%; }
.min-h-100 { min-height: 100%; }

/* Screen Height Percentage */
.vh-25 { height: 25vh; }
.vh-50 { height: 50vh; }
.vh-75 { height: 75vh; }
.vh-100 { height: 100vh; }

Make sure every parent element is set to 100 %, have no padding and margin.

Upvotes: 1

Related Questions