html - 最大高度设置为 child 的高度

Question

我有一个包装 div 和一个很高的 child 。包装器有 resize: vertical; 所以你可以扩展它。

我希望 resize: vertical 工作，除非 child 的高度大于 wrapper。所以我需要禁止扩展包装器添加冗余空间。

有这个问题的纯 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; - 这应该可行。