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

我已在height: auto;元素上追踪block问题。如果设置为自动content元素高度超过block，则heigh:100%属性不起作用。如果我更改.block{heiht:100%}，则.content{height:100%}确实有用，并添加了滚动条。然而，我得到了一个非常重要的事实，即现在.block高度总是100％，即使内容很小。

更新

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

Answer 1

对于FF和EDGE，您需要添加min-height:0px;使flex-shrink工作。写0px而不是0非常重要。

如果容器有高度：auto，则高度100％不能用于FF和IE

1 个答案: