Flexbox在非Flexbox容器内的高度为100%

时间:2016-03-18 18:00:14

标签: html css flexbox

考虑以下笔: http://codepen.io/anon/pen/xVgevE

我们的flex标记<right-component>位于第三方布局的一大块内,即在高度不受限制的div中。

div本身位于外部flexbox布局中。

如何在不对其进行硬编码的情况下使内部flex组件填充可用高度,或者完全覆盖第三方组件的所有样式以使其受Flexbox驱动?

1 个答案:

答案 0 :(得分:0)

您是否正在尝试使用正确的内容填充空间。如果是这样,这个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>