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

Question

我试图理解我的意外行为：

容器中有一个最大高度为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;
}

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

Answer 1

代替max-high： 100%/100%，填充所有空间的另一种方法是使用位置：绝对，顶部/底部/左侧/右侧设置为0。

换句话说，超文本标记语言如下所示：

<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 {
}

您可以在CSS Flex/Grid中的Codesandbox-Overflow中看到一个实例

Answer 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>

Answer 3

奇怪的是，当您为孩子的最大高度指定百分比时，它是家长实际高度的百分比，而不是家长的最大高度的百分比。这同样适用于最大宽度。

因此，当您没有在父级上指定明确的高度时，就没有可以计算子级的max-高度的基高度，因此max-高度计算为no，允许子级尽可能高。现在作用在子级上的唯一其他约束是其父级的max-宽度，并且由于图像本身比它的宽度高，它会向下溢出容器的高度，以便在保持其长宽比的同时仍然尽可能大。

当您为父级指定一个显式高度时，子级知道它最多必须是该显式高度的100%。这允许它被约束到父级的高度（同时仍然保持其长宽比）。