コンテナの高さがFFの場合、高さ100％が機能していません：

Question

奇妙な動作があります。基本的なHTMLの構造：

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

とCSS：

コンテンツは、コンテンツが長い場合、スクロールバーが追加されたに過ぎないよう block要素は同じくらいかかりChromeで

.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; 
} 

。ただし、firefoxとEDGEのスクロールバーは追加されません。

私はこの問題がheight: auto;のblockの要素であることを追跡しました。自動content要素の高さがblockを超えている場合、heigh:100%プロパティが機能していません。 .block{heiht:100%}を変更すると、.content{height:100%}が機能し、スクロールバーが追加されます。しかし、コンテンツが小さい場合でも、現在の.blockの高さは常に100％です。

UPDATE：

[OK]を、私はこの問題は、heightプロパティではなくフレキシボックスのプロパティではないことに気づきました。ブロックにはdisplay:flexがありますが、コンテンツにはflex-shrinkプロパティが1に設定されています。Chromeコンテンツは縮小されますが、FFとEDGEでは縮小されません。

Answer 1

FFとEDGEの場合は、min-height:0pxを追加する必要があります。フレックスシュリンクが機能するようになります。 0の代わりに0pxと書くことが重要です。