如何用CSS实现初始高度自适应内容且可无限制垂直拉伸的Resizable div

直接使用以下CSS即可满足需求：

.mydiv {
  height: min(200px, fit-content);
  overflow-y: auto;
  resize: vertical;
}

原理说明 #

• height: min(200px, fit-content)：初始高度取内容自身高度和200px中的较小值，既解决了内容不足200px时的高度自适应问题，也能在内容超限时将高度限制在200px。
• overflow-y: auto：当内容高度超过容器当前高度时，自动显示垂直滚动条。
• resize: vertical：允许用户垂直调整容器大小，且无高度上限，拖动时可自由拉伸到任意高度。

原方案问题分析 #

• 最初使用height:200px：强制固定高度，内容不足时无法自适应收缩。
• 尝试的max-height:200px：虽实现了初始高度自适应，但会限制调整大小的上限，无法将容器拉伸至200px以上。

内容的提问来源于stack exchange，提问作者matteo