Html Div溢出容器Div高度：100%，溢出：隐藏分隔符滚动-y

首先，小提琴：

我很难调整一个内部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应用程序的div，而“chrome”是另一个组件返回内容的div包装器

如果我在“chrome”div中添加一个overflow:hidden，它似乎解决了我的问题。但是，由于高度仍然太高，但只是看不见，“右”div包含一组要滚动的资产，当您使用滚动条到达div的末尾时会中断，但它被切断

例如：

所以，基本上我是问，有没有人知道如何使“整个”div不脱离其父级“content”div，并正确地填充头部未占用的其余空间

---

tl；dr make container正确填充父容器的其余部分，并且不破坏溢出-y:scroll

以防有人想知道，使用大量flex Box修复了我的问题

这是reddit的/u/bonhone编写的代码笔，他解决了这个问题：

是我使用的神奇css线条。：）

  display: flex;
  flex-grow: 1;