如果容器有高度，高度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