非弹性盒容器内的弹性盒 100% 高度

Question

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

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

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

如何在不硬编码或完全覆盖第三方组件的所有样式以使其由 flexbox 驱动的情况下使内部 flex 组件填充可用高度？

Answer 1

您是否要让正确的内容填充空间。如果是这样，这个 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>