最大高度的孩子：100% 溢出父母

Posted 2023-03-06

【中文标题】最大高度的孩子：100% 溢出父母

【英文标题】：Child with max-height: 100% overflows parent

【发布时间】：2012-12-25 03:16:32

【问题描述】：

我正在尝试了解对我来说似乎是意外的行为：

我在一个容器内有一个最大高度为 100% 的元素，该容器也使用最大高度，但意外的是，子元素溢出了父元素：

测试用例：http://jsfiddle.net/bq4Wu/16/

.container   
    background: blue; 
    padding: 10px; 
    max-height: 200px; 
    max-width: 200px; 


img  
    display: block;
    max-height: 100%; 
    max-width: 100%; 

但是，如果给父级指定了明确的高度，则这是固定的：

测试用例：http://jsfiddle.net/bq4Wu/17/

.container   
    height: 200px;

有谁知道为什么在第一个示例中孩子不尊重其父母的最大高度？为什么需要明确的高度？

【问题讨论】：

浏览器是否为此更改了默认行为？因为在我当前版本的谷歌浏览器上，上面的两个小提琴实际上并没有显示孩子对我来说溢出来。较新的浏览器是否默认使用 box-sizing:border-box 或其他内容？

【参考方案1】：

当您为孩子指定max-height 的百分比时，它是父母实际身高的百分比，而不是父母的max-height、oddly enough。这同样适用于max-width。

因此，当您未在父项上指定显式高度时，则没有要计算子项max-height 的基本高度，因此max-height 计算为none，允许子项为尽可能高。现在作用于子级的唯一其他约束是其父级的max-width，并且由于图像本身的高度大于宽度，它会向下溢出容器的高度，以便在保持其纵横比的同时仍然与总体可能。

当您为父级指定明确的高度时，子级知道它最多只能是该明确高度的 100%。这允许它被限制在父级的高度（同时仍保持其纵横比）。

【讨论】：

这是一个有用的解释，尤其是与我朋友的输入混合：“max-height: 100% (child) of max-height: 100% (parent) = 0 - 这就是为什么你的孩子'不尊重其父值"。

我不确定该接受哪个答案 - 这个答案回答了“为什么”。

我只回答了“为什么”，因为我不确定您的目标是什么，因为它没有明确提及。如果你详细说明，我可以回答。

接受了这个，因为它回答了我的实际问题，谢谢。请注意@Daniel 下面的回答提供了一个修复。

在我的情况下，display: flex; flex-direction: column 解决了问题并添加了我想要的滚动条。

【参考方案2】：

.container 
  background: blue;
  padding: 10px;
  max-height: 200px;
  max-width: 200px;
  float: left;
  margin-right: 20px;


.img1 
  display: block;
  max-height: 100%;
  max-width: 100%;


.img2 
  display: block;
  max-height: inherit;
  max-width: inherit;

<!-- example 1  -->
<div class="container">
  <img class='img1' src="http://via.placeholder.com/350x450" />
</div>

<!-- example 2  -->

<div class="container">
  <img class='img2' src="http://via.placeholder.com/350x450" />
</div>

我玩了一会儿。在 Firefox 中的较大图像上，使用继承属性值得到了很好的结果。这对你有帮助吗？

.container 
    background: blue;
    padding: 10px;
    max-height: 100px;
    max-width: 100px;
    text-align:center;


img 
    max-height: inherit;
    max-width: inherit;

【讨论】：

我不确定接受哪个答案 - 这个答案是“修复”。

接受@BoltClock 回答原因，但感谢您提供修复。

除了@BoltClock，我的回答就是照他说的做。 CSS 只是告诉计算机如何处理一个元素，但在计算之后，它将所有值划分为渲染所需的基本值，如高度、宽度、颜色、坐标……继承属性告诉 img取父级的“计算”值。因此，您可以在 max-height 和 max-width css 属性中获得高度和宽度的计算值。

这在max:height: 100%而不是固定高度时不起作用：jsfiddle.net/umbreak/n6czk9xt/1

我不能将宽度和高度声明为固定的，因为我的布局是响应式dispaly: flex;。我打开了一个新线程：我打开了我的新线程：***.com/questions/29732391/… 但是，在更糟糕的情况下，我可以使用 Jquery 获取 img 的实际宽度和高度并将它们设置在父图像的 div 中。

【参考方案3】：

不使用 max-height: 100%/100%，另一种填充所有空间的方法是使用 position: absolute 并将 top/bottom/left/right 设置为 0。

换句话说，html 如下所示：

<div class="flex-content">
  <div class="scrollable-content-wrapper">
    <div class="scrollable-content">
      1, 2, 3
    </div>
   </div>
</div>

.flex-content 
  flex-grow: 1;
  position: relative;
  width: 100%;
  height: 100%;


.scrollable-content-wrapper 
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow: auto;


.scrollable-content 

您可以在Codesandbox - Overflow within CSS Flex/Grid 看到一个实时示例

【参考方案4】：

我在这里找到了解决方案： http://www.sitepoint.com/maintain-image-aspect-ratios-responsive-web-design/

这个技巧是可能的，因为它在元素的 WIDTH 和 PADDING-BOTTOM 之间存在关系。所以：

父母：

container 
  height: 0;
  padding-bottom: 66%; /* for a 4:3 container size */
  

child（移除所有与width相关的css，即width:100%）：

img 
  max-height: 100%;
  max-width: 100%;
  position: absolute;     
  display:block;
  margin:0 auto; /* center */
  left:0;        /* center */
  right:0;       /* center */
  

【参考方案5】：

您可以使用属性object-fit

.cover 
    object-fit: cover;
    width: 150px;
    height: 100px;

点赞here

A full explanation of this property 由 Dev.Opera 中的 Chris Mills 撰写

和an even better one 在 CSS 技巧中

支持

铬 31+ Safari 7.1+ 火狐 36+ Opera 26+ android 4.4.4+ iOS 8+

我刚刚检查过 vivaldi 和 chromium 也支持它（这并不奇怪）

IE 目前不支持，但是... who cares ?此外，iOS 支持 object-fit，但不支持 object-position，但很快就会支持。

【讨论】：

不错的选择！如果 IE 中的优雅降级是可以接受的，我想 flex-box 也可能会有所帮助。

【参考方案6】：

这是最近打开的问题的解决方案，该问题被标记为 this 问题的副本。 <img> 标签超过了父 <div> 的最大高度。

坏了：Fiddle

工作：Fiddle

在这种情况下，将 display:flex 添加到 2 个父 <div> 标签就是答案

【参考方案7】：

也许其他人可以解释您的问题背后的原因，但您可以通过指定容器的高度然后将图像的高度设置为 100% 来解决它。重要的是图像的width 出现在height 之前。

<html>
    <head>
        <style>
            .container   
                background: blue; 
                padding: 10px;
                height: 100%;
                max-height: 200px; 
                max-width: 300px; 
            

            .container img 
                width: 100%;
                height: 100%
            
        </style>
    </head>
    <body>
        <div class="container">
            <img src="http://placekitten.com/400/500" />
        </div>
    </body>
</html>

【讨论】：

如果图片小于200x200，如果他们希望容器变小，那么可以，必须使用min-height/max-height。

【参考方案8】：

我能得到的最接近的是这个例子：

http://jsfiddle.net/YRFJQ/1/

或

.container   
  background: blue; 
  border: 10px solid blue; 
  max-height: 200px; 
  max-width: 200px; 
  overflow:hidden;
  box-sizing:border-box;


img  
  display: block;
  max-height: 100%; 
  max-width: 100%; 

主要问题是高度占容器高度的百分比，所以它在父容器中寻找明确设置的高度，而不是最大高度。

在某种程度上，我可以看到的唯一解决方法是上面的小提琴，您可以在其中隐藏溢出，但是填充仍然充当图像流入的可见空间，因此替换为实心边框可以代替（如果这是您需要的宽度，然后添加边框框使其变为 200 像素）

不确定这是否符合您的需要，但我似乎能做到最好。

【讨论】：

不幸的是，裁剪图像并不理想。不过感谢您的意见。

【参考方案9】：

一个好的解决方案是不要在父级上使用高度，而只在带有View Port 的子级上使用它：

小提琴示例：https://jsfiddle.net/voan3v13/1/

body, html 
  width: 100%;
  height: 100%;

.parent 
  width: 400px;
  background: green;


.child 
  max-height: 40vh;
  background: blue;
  overflow-y: scroll;

【讨论】：

这对我来说就像一个魅力！

【参考方案10】：

只需将display: flex; 添加到容器中即可。 Look at this.

【参考方案11】：

容器通常已经很好地包装了它们的内容。反过来，它通常也不能很好地工作：孩子们不能很好地满足他们的祖先。所以，在最里面的元素而不是最外面的元素上设置你的宽度/高度值，让外面的元素包裹它们的内容。

.container 
    background: blue;
    padding: 10px;


img 
    display: block;
    max-height: 200px;
    max-width: 200px;

【讨论】：

不错，我喜欢这个。

【参考方案12】：

http://jsfiddle.net/mpalpha/71Lhcb5q/

.container   
display: flex;
  background: blue; 
  padding: 10px; 
  max-height: 200px; 
  max-width: 200px; 


img  
 object-fit: contain;
  max-height: 100%; 
  max-width: 100%; 

<div class="container">
  <img src="http://placekitten.com/400/500" />
</div>

【参考方案13】：

您的容器没有高度。

添加 高度：200px；

到容器 css 中，小猫会留在里面。

【讨论】：

感谢您的输入，但我确实在 OP 中确定了这一点。