html - 如果容器的高度为 :auto，则高度 100% 在 FF 和 IE 上不起作用

Question

我有一些奇怪的行为。基本的 html 结构:

<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 中没有添加滚动条。

我发现问题出在 block 元素上的 height: auto; 上。如果设置为自动 content 元素高度超过 block，那么 heigh:100% 属性不起作用。如果我更改 .block{heiht:100%} 则 .content{height:100%} 会起作用并添加滚动条。然而，我得到一个令人不快的事实，即现在 .block 高度总是 100%，即使内容很小。

更新:

好的，我意识到问题不在于 height 属性，而在于 flexbox 属性。 block 有 display:flex 但内容有 flex-shrink 属性设置为 1。在 Chrome 上内容缩小，但在 FF 和 EDGE 上它不会缩小。

Answer 1

对于 FF 和 EDGE 你需要添加 min-height:0px;为 flex-shrink 工作。写 0px 而不是 0 很重要。