考虑以下笔: http://codepen.io/anon/pen/xVgevE
我们的 flex 标记,<right-component>
位于第三方布局 block 内,即在高度不受限制的 div 中。
div 本身位于外部 flexbox 布局中。
如何让内部 flex 组件填充可用高度而不对其进行硬编码,或者完全覆盖第三方组件的所有样式以使其由 flexbox 驱动?
最佳答案
您是否试图让正确的内容填充空间。如果是这样,这个 jsFiddle 可能包含答案:https://jsfiddle.net/Dneilsen22/crfz66jx/
您有一个高度设置为 100vh 的根,因此通过创建一个像 rightComponent 这样的容器并将其设置为相同的高度,我们可以让内容填充 100% 的空间。
CSS:
#rightComponent {
height: 100vh;
display: flex;
flex-direction: column;
}
#right-content {
display:flex;
flex-direction: column;
background: #779;
height:100%
}
HTML:
<uncontrollable-third-party-component>
<div>Third party stuff</div>
<div id="rightComponent">
<div id="right-topbar">
Right topbar
</div>
<div id="right-content">
Right content
</div>
</div>
</uncontrollable-third-party-component>
关于html - 非 flex 盒容器内的 flex 盒 100% 高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36091289/