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

【问题标题】：Div overflowing container div with height: 100%, overflow: hidden breaks scroll-ydiv 溢出容器 div 高度：100%，溢出：隐藏中断 scroll-y
【发布时间】：2015-07-16 21:15:56
【问题描述】：

首先，小提琴：

https://jsfiddle.net/bsdvc4km/1

我无法对齐内部 div 以占据容器的其余高度。正如您在小提琴中看到的那样，div“整体”附有一个标题，下面是一个“内容”div。这个“整个” div 溢出高度为 100% 的“内容” div，而不是抓取其父“内容”的高度，而是抓取整个视口的高度。

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

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

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

本质上存在两个 div，“chrome”和“content”来保存左右 div 的原因是，这是一个 react 应用程序，而“chrome”是另一个组件返回的 div 包装器。

如果我在“chrome”div 中添加一个溢出：隐藏，它似乎可以解决我的问题。然而，因为高度仍然太高，但只是不可见，“正确”的 div，其中包含一堆打算滚动的资产，当您到达带有滚动条的 div 的末尾时会中断，但它被切断了。

这个例子： https://jsfiddle.net/gy1kpxwk/3

所以，基本上我在问有没有人知道如何制作它，这样“整个” div 不会脱离其父级“内容”div，并正确填充未占用的其余空间标题？

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

【问题讨论】：

标签： html css scroll flexbox styling

【解决方案1】：

如果有人想知道，使用很多弹性框解决了我的问题。

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

  display: flex;
  flex-grow: 1;

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

【讨论】：