max-height设置为孩子的身高

Question

我有一个包装div和一个非常高大的孩子。包装器有resize: vertical;，因此您可以扩展它。

除非孩子的身高大于包装，否则我希望resize: vertical能够工作。所以我需要禁止扩展包装器添加冗余空间。

这个问题有纯CSS解决方案吗？这不是一个限制因素。

我想这可以通过包装器中的max-height属性来实现。但是我在那里写的是什么价值？

在下面的示例中，您可以无限制地扩展包装器。

html, body {
  padding: 0;margin:0;border:0;
  height: 1000px;
  background: rgba(0,0,0,0.05);
}

.wrapper {
  background: red;
  width: 400px;
  height: 200px;
  max-height: 100%; /* What should be here? */
  resize: vertical;
  overflow: auto;
}

<div class="wrapper">
  <div class="child">
    <p>Garpike. Roosterfish bigmouth buffalo sand lance redside lyretail scissor-tail rasbora riffle dace. Mosquitofish golden dojo chub: pineconefish; squawfish hillstream loach, neon tetra tommy ruff clownfish, zebra lionfish snipe eel. Hamlet, "smalleye squaretail perch wolf-eel, snailfish velvet-belly shark Black tetra cherry salmon collared dogfish." Upside-down catfish sweeper wels catfish driftwood catfish nurse shark Arctic char yellowhead jawfish crucian carp, mojarra Sacramento splittail thornyhead antenna codlet banded killifish. Bamboo shark porcupinefish threadfin bream, largemouth bass. Channel bass slender mola plownose chimaera, catalufa paradise fish African glass catfish weasel shark clingfish wolf-eel scissor-tail rasbora Blobfish? Barb, tonguefish featherfin knifefish.</p>
  </div>
</div>

Answer 1

如何将max-height设置为父元素，然后在元素max-height: inherit;中设置 - 应该有效。