仅当超过一定高度时才可调整大小

Question

考虑以下 HTML+CSS 中可调整大小的 div：

<!--HTML-->
<div class="mydiv">Lorem ipsum dolor sit amet....</div>

/* CSS */
.mydiv {
  height: 200px;
  overflow-y: auto;
  resize: vertical;
}

如果div的内容超过

200px

，结果就是我想要的：高度将被限制为200px，它将有一个滚动条，并且它将可调整大小。

但是，如果内容的高度低于 200px，则上面的示例将不必要地强制高度为 200px。在这种情况下，我希望高度是所需的最小高度。

我试过这个：

/* CSS */
.mydiv {
  max-height: 200px;
  overflow-y: auto;
  resize: vertical;
}

但是这不起作用，因为

max-height

即使在使用调整大小手柄调整div大小时也适用，也就是说，我永远无法将其调整到200px以上。

如何使其可以无限制地调整大小，但具有初始默认最大高度？也就是说，初始高度是给定值与适合内容的高度之间的最小值？

显然我正在寻找仅 CSS 的解决方案。我知道如何在 JavaScript 中执行此操作

Answer 1

删除

height

：

.mydiv {
  width:100px;
  border:solid 1px;
  overflow-y: auto;
  resize: vertical;
}

<div class="mydiv">Lorem ipsum dolor sit amet....</div>