我如何将div扩展到一定高度，并且仅在滚动之后才扩展？

问题描述

我的div本来是一定大小的，例如100px。我希望它能够扩展以适应内容，例如直到250px，然后滚动。 我尝试使用

  text-overflow: ellipsis; max-height: 250px; overflow-y: scroll;

但是它不起作用，一旦文本溢出100px，它就会滚动。

如何仅使用CSS做到这一点？

解决方法

基于Ajeet Eppakayala的评论，这似乎可行，将div扩展到250px高度，然后显示滚动条：

<style>
div {
  text-overflow: ellipsis;
  font-size:20px;
  min-height: 100px;
  max-height: 250px;
  height:auto;
  overflow-y:auto;
  background-color:cyan;
  margin-top:20px;
}
</style>
<p>height:100px;</p>
<div>
  1<br>2<br>3<br>
</div>
<p>height: whatever is required for the text</p>
<div>
  1<br>2<br>3<br>1<br>2<br>3<br>4<br>5
</div>
<p>height:250px and scrolling</p>
<div>
  1<br>2<br>3<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>11<br>12<br>12<br>14<br>15<br>16<br>
</div>