使div可以在具有可变高度的div下滚动

Question

我有一个页面如下：

组件A的高度可变，因此在会话期间，它会根据用户的输入进行更改。

组件B有一个很大的（因此 未知 ）高度，所以我需要一个滚动条（大部分时间）。

提供此类网页的最佳解决方案是什么？ 仅使用css ？

ps：由于兼容性问题，我不想使用flex-grow或flex-shrink等新属性。

Answer 1

是的我认为你应该使用css，因为你也可以使用条件css作为div，如max-height：300px;溢出 - X：隐藏;溢出-γ：汽车;

这意味着如果div高度增加然后300px，那么滚动将显示在那里。

Answer 2

添加组件B max-height，如

.ComponentB
 {
   max-height:calc(100% - 200px);
   overflow:auto;
 }

Answer 3

你的意思是组件A和组件B都有一个未知的高度;但是A有 一个 min-height ，B有一个 max-height ，我写了一个演示如下。

＆＃13;

＆＃13;

.A {
  width: 200px;
  min-height: 100px;
  background-color: red;
}
.B {
  width:200px;
  height:100px;
  max-height: 150px;
  background-color: yellow;
}

＆＃13;

<div class="A"></div>
<textarea class="B"></textarea>

＆＃13;

＆＃13;

＆＃13;