使一个Div的高度填充剩余空间，但不超过另一个Div

如何解决使一个Div的高度填充剩余空间，但不超过另一个Div

我正在尝试使用CSS做一些棘手的事情。

在我的页面上，我有两个并排的div。两个div的内容都可以根据用户的操作进行更改（可以有更多或更少的内容）。

Div＃1（左div）需要取决于div＃2（右div）的高度。 Div＃1应该填满div＃2的剩余空间，但不能超过div＃2的高度。它的溢出应该滚动。

但是不应该限制div＃2的高度，它应该能够按需增长或收缩，而无需滚动。

我可以将div＃1设置为一定的高度，并给它的溢出滚动，但是如果div＃2增大，它看起来像这样：

我希望div＃1与div＃2一起增长，但不要超出它。

简而言之，div＃1的高度需要取决于div＃2。

我为此做了一个演示：https://stackblitz.com/edit/dependent-height-demo?file=app/app.component.css

我希望CSS在app.component.css中发生（理想情况下），因为在实际应用中，很难影响组件的样式。

（编辑：stackoverflow表示这是“如何将外部div的高度设置为始终等于特定内部div的高度？”的重复项，这不是因为它不涉及内部div，所以是两个div彼此相邻。这是不同的，并且该问题的解决方案对我没有帮助。）

感谢您提供的任何帮助！

解决方法

您可以执行以下操作-

.wrapper {
  display: grid;
  grid-template-columns: 100px 1fr;
}

.wrapper div {
  border: 1px solid red;
}

.wrapper .left {
  position: relative;
  overflow: hidden;
}

.wrapper .left .inner {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  overflow-y: scroll;
}

<div class="wrapper">

  <div class="left">
    <div class="inner">
      left<br> left<br> left<br> left<br> left<br> left<br> left<br> left<br> left<br> left<br> left<br> left<br> left<br> left<br> left<br> left<br> left<br> left<br> left<br> left<br> left<br> left<br>
    </div>
  </div>

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

</div>

我在这里所做的是-

1. 我将左面板的内容包装在名为inner的类中。
2. 我在position: absolute类中添加了inner，并添加了height: 100%以匹配左侧面板的高度。左面板的高度取决于右面板。
3. 我将overflow-y: scroll添加到inner类中，以在内容大于高度时垂直滚动它。

,

旁边 元素是可滚动的，并且高度与 Main 中的一个匹配：

* {
  box-sizing: border-box;
  margin: 0;
}

#app {
  display: flex;
}

#aside {
  position: relative;
  overflow: auto;
  width: 200px;
  background: #ffc;
}

#main {
  flex: 1;
  background: #fcc;
}

.full {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

<div id="app">

  <aside id="aside">
    <div class="full">ASIDE<br>Lorem...</div>
  </aside>

  <main id="main">
    MAIN
  </main>

</div>