html - 高度 : 100% not working when parent div only has max-height

Question

无法绕过它!我尝试使用 max-height 使父 div 的高度不超过窗口的 80% , 和子 div 将所有父高度减去一些东西。

但是height以 parent 百分比表示的属性(property)对 child 根本不起作用，除非我给 parent height属性(property)。

这是为什么？

这是我的简化 fiddle :https://jsfiddle.net/mbatcer/m2ohnsf5/
为什么内部 div 不尊重父高度并超出容器？

HTML:

<div class="container">
  <div class="inner">
    <img src="http://via.placeholder.com/70x300">
  </div>
</div>

CSS:

.container {  
  background: blue; 
  padding: 10px; 
  max-height: 100px; 
}

.inner { 
  height: 100%;
  width: 70px;
  overflow: hidden;
}

Answer 1

我认为这就是你要找的:

.container {  
  background: blue; 
  padding: 10px; 
  max-height: 100px; 
  display: flex;

}

.inner { 
  width: 70px;
  overflow: hidden;
}

这是 fiddle :https://jsfiddle.net/f9sfczya/1/

在这里我添加了 display: flex;在您的父 div 中并移除高度:100%；
从子div。

不幸的是显示:flex； IE9 及更早版本不支持。

希望这可以帮助你。