Einstellung 100% Höhe des Kind-Div in geschlossenen Flexbox funktioniert nicht

Question

Der folgende Code wird ordnungsgemäß in FF angezeigt, aber wenn in Chrome ausgeführt div 'c' Höhe scheint nicht zu wissen, was 100% bedeutet. Wer weiß warum?

#flex { 
 
    display: flex; 
 
    align-self: stretch; 
 
    flex-flow: column; 
 
    height: 300px; 
 
    width: 100%; 
 
} 
 
#a { 
 
    order: 1; 
 
    flex: 0 1 auto; 
 
    background-color: red; 
 
} 
 
#b { 
 
    order: 2; 
 
    flex: 1 1 auto; 
 
    background-color: blue; 
 
} 
 
#c { 
 
    float: left; 
 
    margin: 5px; 
 
    width:-moz-calc(100% - 10px); 
 
    width:-webkit-calc(100% - 10px); 
 
    height:-webkit-calc(100% - 10px); 
 
    height:-moz-calc(100% - 10px); 
 
    background-color: yellow; 
 
    overflow-y: scroll; 
 
}

<div id='flex'> 
 
    <div id='a'>testa</div> 
 
    <div id='b'> 
 
    <div id='c'>test</div> 
 
    </div> 
 
</div>

Hier ist die jsfiddle Seite für das Bild auf diese Frage angebracht:

https://jsfiddle.net/uya5sboy/

Answer 1

Dies ist, weil die Eltern nicht angegeben hat Höhe. Webkit-Browser halten sich expliziter an die Spezifikation. In diesem Fall gibt "Prozentsatz" die Höhe dieses Elements an, die sich auf das übergeordnete Element bezieht. Wenn das übergeordnete Element keine explizit angegebene Höhe hat, wird der Prozentwert auf "auto" berechnet (es sei denn, die Position dieses Elements ist absolut).

Answer 2

Statt die Höhe mit einem Prozentwert zu setzen, da Sie bereits eine Höhe von 300px zu seinem Elternteil festgelegt haben, warum nicht einfach die Höhe manuell einstellen? https://jsfiddle.net/uya5sboy/4/

height: 272px;

Answer 3

hat, dass vor einer Weile Problem. Um es zu beheben, fügen Sie einfach height:100% zu Ihrem übergeordneten Container hinzu.

#b { 
    order: 2; 
    flex: 1 1 auto; 
    background-color: blue; 
    height: 100%; 
} 

jsfiddle: https://jsfiddle.net/uya5sboy/3/

nicht die schönste Lösung zwar, aber es funktioniert und ist ziemlich einfach.