zaciemnione problemów z użyciem schematu flexbox w Firefoksie i Chrome 48

Question

Chrome 47 (poprawne zachowanie): Chrome 47, że div z .scroll przewija prawidłowo, biorąc wysokość 100% przy użyciu Flex.

na Firefox (złe zachowanie): Podczas firefox, że div z .scroll korzysta wysokość treści, a nie przewijania poprawnie.

Jakie jest rozwiązanie tego problemu w różnych przeglądarkach?

http://jsfiddle.net/d4nkevee/

for (var i = 0; i < 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>

---

Pytanie aktualizowane odróżnić Chrome 47 i Chrome 48.

Answer 1

Specyfikacja schematu flexbox została zaktualizowana dokonywania domyślny rozmiar minimalny Flex elementy równe rozmiarowi treść: min-width: auto/min-height: auto.

Można zmienić to ustawienie za pomocą 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/

raport o błędzie: https://bugzilla.mozilla.org/show_bug.cgi?id=1043520

Oto kilka szczegółów z spec:

4.5. Implied Minimum Size of Flex Items

W celu zapewnienia bardziej racjonalną domyślny rozmiar minimalny dla pozycji typu flex, ta specyfikacja wprowadza nową wartość auto jako wartości początkowej z min-width i min-height właściwości zdefiniowane w CSS 2.1. (read more)

---

UPDATE

Wydaje się, że Chrome uaktualnili swoje zachowanie renderowania. Chrome 48 emuluje teraz Firefoksa pod względem minimalnego rozmiaru flexu.

Na podstawie raportów pod poniższymi linkami powyższe rozwiązanie powinno również działać w przeglądarce Chrome 48.

• Possible Chrome 48 flexbox bug causing layout issues. #6841
• Issue 580196: Nested 'flex-direction:column' elements don't shrink properly