html - Rendering problems using flexbox in Firefox and Chrome 48 -


this question has answer here:

on chrome 47 (correct behavior): on chrome 47, div .scroll scrolling correctly, taking height 100% using flex.

on firefox (wrong behavior): while on firefox, div .scroll using content height , not scrolling properly.

what cross-browser solution problem?

http://jsfiddle.net/d4nkevee/

for (var = 0; < 100; i++)    $(".scroll").append("dynamic content<br>");
body,  html {    margin: 0;    padding: 0;  }  .container {    box-sizing: border-box;    position: absolute;    height: 100%;    width: 100%;    display: flex;    flex-direction: column;  }  .content {    background: yellow;    flex: 1;    display: flex;    flex-direction: column;  }  .scroll {    flex: 1 1 auto;    overflow: scroll;  }
<div class="container">        <div class="bar">small</div>        <div class="content">            <div>static content</div>      <div class="scroll"></div>      <div>static content</div>          </div>        <div class="footer">small</div>      </div>

question updated distinguish between chrome 47 , chrome 48.

the flexbox specification updated making default minimum size of flex items equal size of content: min-width: auto / min-height: auto.

you can override setting min-width: 0 / min-height: 0:

.content {     background: yellow;     flex: 1;     display: flex;     flex-direction: column;      min-height: 0;           /* new */     min-width: 0;            /* new */ }

http://jsfiddle.net/d4nkevee/1/

bug report: https://bugzilla.mozilla.org/show_bug.cgi?id=1043520

here details spec:

4.5. implied minimum size of flex items

to provide more reasonable default minimum size flex items, specification introduces new auto value initial value of min-width , min-height properties defined in css 2.1. (read more)

update

it appears chrome has updated rendering behavior. chrome 48 emulates firefox in terms of minimum flex sizing.

based on reports in following links, solution above should work in chrome 48, well.


Comments

Post a Comment