Flexbox css 获得高度 100%

Question

我在右侧有一列<IndustryList />，我希望另一个<div> 中包含<ParameterAndPostSearch /> 和<SocialPostList /> 的所有内容都延伸到底部，但是我无法让它延伸到底部即使是height: 100%。这是图片：

这是来自 ReactJS 代码的相关组件： 我已经大大简化了任何不应该成为问题的东西。我正在使用 Tachyons CSS，但它应该是不言自明的（如果没有，我可以添加 CSS）

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

<SocialPostList />仅供参考：

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

想通了！更新... 所有固定的和绝对的都在不应该有它们的区域造成滚动条。此外，我通过并模仿了https://jsfiddle.net/MadLittleMods/LmYay/ 此处找到的 flexbox 布局，它帮助了很多。所以花了一段时间，但我把它都修好了。

Answer 1

我没有使用过 Tachyon CSS，但文档中是这样写的：

/* 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; }

确保每个父元素都设置为 100 %，没有填充和边距。