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>