如果容器有高度，高度100％不能在FF和IE上工作：auto

我有一些奇怪的行为。基本的HTML结构：如果容器有高度，高度100％不能在FF和IE上工作：auto

<div class="overlay"> 
<div class="block"> 
    <div class="content"> 
    <form> 
    ... 
    </form> 
    </div> 
</div> 
</div>

和css：

.overlay{ 
    display: flex; 
    position: fixed; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0; 
    z-index: 15; 
    width: 100%; 
    height: 100%; 
    justify-content: center; 
    align-items: center; 
    background: rgba(0,0,0,.8); 
} 
.block{ 
    position: relative; 
    display: flex; 
    flex-direction: column; 
    flex: 1 1 auto; 
    height: auto; 
    max-height: calc(100% - 30px); 
    max-width: 800px; 
    background: #fff; 
} 
.content{ 
    display: flex; 
    flex-flow: column nowrap; 
    padding: 15px; 
    flex: 1 1 auto; 
} 
form{ 
    display: flex; 
    flex-direction: column; 
    overflow-y: auto; 
}

在Chrome中block元素需要尽可能含量，但如果含量再添加滚动条。但是，在Firefox和EDGE滚动条不会被添加。

我已经找到了height: auto;block元素。如果设置为自动content元素高度已超过block，那么heigh:100%属性不起作用。如果我更改.block{heiht:100%}然后.content{height:100%}确实工作，并添加滚动条。然而，我得到一个不可思议的事实：即使内容很小，.block height现在始终是100％。

UPDATE：

好吧，我意识到问题是不是与height属性但Flexbox的性能。 Block有display:flex，但内容的flex-shrink属性设置为1.在Chrome上内容会缩小，但在FF和EDGE上它不缩小。

来源

2017-03-08 Kārlis Janisels