Div 溢出容器 div 高度：100%，溢出：隐藏中断 scroll-y

Question

首先，fiddle：

我无法对齐内部 div 以占据容器的其余高度。正如您在 fiddle 中看到的那样，div "whole" 附加了一个 header，下面是一个 "content" div。这个 "whole" div 溢出了 "content" div 的高度 100%，而不是抓住它的 parent "content" 的高度，它抓住了整个视口的高度。

<div class="whole">
     <div class="left">
     </div>
     <div class="right">
     </div>
</div>

这个容器应该适合放在里面

<div class="content">
    <div class="whole">
    </div>
<div>

基本上有两个 div 的原因，"chrome" 和 "content"，用来容纳左右 divs 的原因是这是一个 React 应用程序"chrome" 是一个 div 包装器，围绕着另一个组件 returns.

如果我将 overflow:hidden 添加到 "chrome" div，它似乎可以解决我的问题。但是，由于高度仍然太高，但只是看不见，所以 "right" div 包含一堆旨在滚动浏览的资产，当您到达 [=49= 的末尾时中断] 与滚动条，但它被切断。

这方面的例子： https://jsfiddle.net/gy1kpxwk/3

所以，基本上我想问的是有没有人知道如何做到 "whole" div 不会脱离它的 parent，"content" div，并适当填充 space 未被 header?

占用的其余部分

tl;dr 使容器正确填充 parent 容器的其余部分，并且不破坏 overflow-y：滚动

Answer 1

万一有人想知道，使用大量弹性框解决了我的问题。

这是 reddit 的 /u/bonhone 的代码笔，他解决了这个问题： http://codepen.io/anon/pen/gpjReQ

  display: flex;
  flex-grow: 1;

是我使用的魔法 css 行。 :)

Div 溢出容器 div 高度：100%，溢出：隐藏中断 scroll-y

Div overflowing container div with height: 100%, overflow: hidden breaks scroll-y

html

css

scroll

styling

flexbox