使一个 div 的高度填充剩余空间，但不要越过另一个 div [重复]

Question

我正在尝试用 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 彼此相邻。这是不同的，并且该问题的解决方案对我没有帮助。）

感谢您提供的任何帮助！

Answer 1

你可以这样做 -

.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 类中，以便在内容大于高度时垂直滚动。

Answer 2

Aside 元素是可滚动的，并且高度与 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>