Html 子元素高度由最大高度父包装

Question

我有max-height: 300px行。

在文档http://www.w3.org/TR/CSS21/visudet.html#min-max-heights我读到：“孩子的最大身高，它是父母实际身高的百分比”。 Okey让parent has unknown height，但是他的身高不能超过设置的max-height，对吧？

但为什么子 div 是溢出父？ 我尝试将 min-h-0 添加到孩子的 div 没有任何改变

<div class="flex items-start max-h-[300px]">
    <div class="max-h-full"><img src="veryBigImage"/></div>
    <div class="max-h-full"><video src="veryBigVideo"/></div>
</div>

ps（我这里不考虑内部元素显示的正确性，wrapper里面可以有很多元素，我管不了。）

更新。

1,2 - 文档应该如何工作。 是的，不正确的图像 cut\display 但 wrapper 不能溢出 min-height:0 flex +(overflow: hidden *optional)

3 - 现在如何工作，包装器溢出父级

沙盒： https://play.tailwindcss.com/bvfy0kF5Nz

Answer 1

从技术上讲，您对max-height是正确的，但真正的问题是您的img和video 。

它们由资源的实际大小（如图像等）控制，而不是 HTML

https://www.w3schools.com/tags/tag_img.asp

图片在技术上没有插入 web 页面； 图片链接到 web 页。 该标签为引用的图像创建了一个存放空间。

如果您想克服这个问题，您需要为img或video （通过 CSS 或内联属性）正确设置width或height ，这将有助于 HTML 了解您的预期大小。

Answer 2

2天后我找到了解决方案！！！ 没有添加高度，也没有为“img 和视频”设置任何内容

@nick-vu 谢谢你的尝试

https://play.tailwindcss.com/mTcsccgElW

  <div class="flex flex-col max-h-[300px] bg-purple-500 grow">
    <div class="flex-grow flex h-0 bg-orange-200">
      <div class="min-h-0 border-[5px] border-red-700">
        <img class="max-h-full" src="https://wallpapershome.ru/images/pages/pic_v/14572.jpg" />
      </div>
    </div>
  </div>