CODEWITHSUNDEEP
htmlcssflexbox
Kārlis Janisels
Kārlis Janisels

Reputation: 1295

Height 100% is not working on FF and IE if container have height:auto

I have some strange behavior. Basic html structure:

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

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

In Chrome block element takes as much as content is but scroll bar is added if content is longer. However in firefox and EDGE scrollbar is not added.

I have tracked down that problem is with height: auto; on block element. If set to auto content element height is over block, so heigh:100% property is not working. If I change .block{heiht:100%} then .content{height:100%} does work and scrollbar is added. However I get unplesant fact that now .block height is 100% always, even if content is small.

UPDATE:

Ok, I realized that problem is not with the height property but with flexbox properties. Block has display:flex but content has flex-shrink property set to 1. On Chrome content shrinks, but on FF and EDGE it does not shrink.

Upvotes: 0

Views: 533

Answers (1)

Kārlis Janisels
Kārlis Janisels

Reputation: 1295

For FF and EDGE you need to add min-height:0px; for flex-shrink to work. It is important to write 0px instead of 0.

Upvotes: 2

Related Questions