firefox Überlauf-y funktioniert nicht mit verschachtelten flexbox

Ich habe ein 100% Breite 100% Höhe Layout mit CSS3 Flexbox, die sowohl auf IE11 funktioniert (und wahrscheinlich auf IE10, wenn die Emulation von IE11 ist richtig) entworfen.firefox Überlauf-y funktioniert nicht mit verschachtelten flexbox

Aber Firefox (35.0.1), Überlauf-y funktioniert nicht. Wie Sie in diesem Codepen sehen können: http://codepen.io/anon/pen/NPYVga

firefox Rendern nicht ordnungsgemäß Überlauf. Es zeigt eine Scrollbar

html, 
 
body { 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
    border: 0; 
 
} 
 
.level-0-container { 
 
    height: 100%; 
 
    display: -webkit-box; 
 
    display: -webkit-flex; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    -webkit-box-orient: vertical; 
 
    -webkit-box-direction: normal; 
 
    -webkit-flex-direction: column; 
 
    -ms-flex-direction: column; 
 
    flex-direction: column; 
 
} 
 
.level-0-row1 { 
 
    border: 1px solid black; 
 
    box-sizing: border-box; 
 
} 
 
.level-0-row2 { 
 
    -webkit-box-flex: 1; 
 
    -webkit-flex: 1; 
 
    -ms-flex: 1; 
 
    flex: 1; 
 
    border: 1px solid black; 
 
    box-sizing: border-box; 
 
    display: -webkit-box; 
 
    display: -webkit-flex; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    -webkit-box-orient: horizontal; 
 
    -webkit-box-direction: normal; 
 
    -webkit-flex-direction: row; 
 
    -ms-flex-direction: row; 
 
    flex-direction: row; 
 
} 
 
.level-1-col1 { 
 
    width: 20em; 
 
    overflow-y: auto; 
 
} 
 
.level-1-col2 { 
 
    -webkit-box-flex: 1; 
 
    -webkit-flex: 1; 
 
    -ms-flex: 1; 
 
    flex: 1; 
 
    border: 4px solid blue; 
 
    box-sizing: border-box; 
 
    display: -webkit-box; 
 
    display: -webkit-flex; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    -webkit-box-orient: vertical; 
 
    -webkit-box-direction: normal; 
 
    -webkit-flex-direction: column; 
 
    -ms-flex-direction: column; 
 
    flex-direction: column; 
 
} 
 
.level-2-row2 { 
 
    -webkit-box-flex: 1; 
 
    -webkit-flex: 1; 
 
    -ms-flex: 1; 
 
    flex: 1; 
 
    border: 4px solid red; 
 
    box-sizing: border-box; 
 
    overflow-y: auto; 
 
}

<html> 
 
<body> 
 

 
    <div class="level-0-container"> 
 

 
     <div class="level-0-row1"> 
 
      Header text 
 
     </div> 
 

 
     <div class="level-0-row2"> 
 

 
      <div class="level-1-col1"> 
 
       line <br/> 
 
       line <br/> 
 
       line <br/> 
 
       line <br/> 
 
       line <br/> 
 
       line <br/> 
 
       line <br/> 
 
       line <br/> 
 
       line <br/> 
 
       line <br/> 
 
       line <br/> 
 
       line <br/> 
 
       line <br/> 
 
       
 
      </div> 
 

 
      <div class="level-1-col2"> 
 

 
        <div class="level-2-row1"> 
 
         Some text 
 
         <p/> Some text 2 
 
         <p/> Some text 3 
 
         <p/> 
 
        </div> 
 

 
        <div class="level-2-row2"> 
 
         <p>some text</p> 
 
         <p>some text</p> 
 
         <p>some text</p> 
 
         <p>some text</p> 
 
         <p>some text</p> 
 
         <p>some test</p> 
 
        </div> 
 
       </div> 
 

 
     </div> 
 

 
    </div> 
 
</body> 
 

 

 
</html>

Quelle

2015-02-20 rekna

113

tl; dr: Sie min-height:0 in Ihrer .level-0-row2 Regel benötigen. (Here's a codepen with that fix.)

Detailliertere Erklärung:

Flex Artikel im Standardmindestgröße herzustellen, die auf ihre Kinder intrinsische Größe basiert (was nicht „Überlauf“ Eigenschaften auf ihre Kinder/Nachkommen nicht berücksichtigt).

Jedes Mal, wenn Sie ein Element mit overflow: [hidden|scroll|auto]innerhalb eines flexiblen Elements haben, müssen Sie seine Vorfahren flex Artikel min-width:0 (in einem horizontalen Flex Containern) oder min-height:0 (in einem vertikalen Flex-Containern) geben, deaktivieren, dies Min-Sizing-Verhalten, oder das Flex-Element wird nicht kleiner als die Min-Content-Größe des Kindes verkleinern.

Siehe https://bugzilla.mozilla.org/show_bug.cgi?id=1043520 für weitere Beispiele von Websites, die von diesem gebissen wurden. (Beachten Sie, dass dies nur ein Metabug ist, um Websites zu verfolgen, die durch diese Art von Problem unterbrochen wurden, nachdem dieser Spezifikations-Text implementiert wurde - es ist nicht wirklich ein Fehler in Firefox.)

~~Sie werden dies nicht sehen in Chrome (zumindest nicht als von diesem Posting), weil sie haven't implemented this minimum sizing behavior yet.~~ (BEARBEITEN: Chrome hat jetzt dieses Mindestgrößenverhalten implementiert, aber sie können immer noch incorrectly collapse min-sizes to 0 in some cases.)

Quelle

2015-02-20 22:58:27 dholbert

ich dieses Problem getroffen habe, aber ich hatte min-height hinzuzufügen: 0 an alle Eltern Flexbox Spalten - jede Idee warum? –

Muss diese Min-Höhe (in meinem Fall) auf * jeden * Vorfahren angewendet werden? Oder nur das unmittelbare Elternteil? –

Es muss möglicherweise auf jeden Vorfahren angewendet werden, der ein Flex-Element ist (d. H. Jeder Vorfahr, dessen Elternteil "display: flex" ist), abhängig von den Umständen. – dholbert

einfache Antwort ist, fügen Sie ein "fireFoxFlexShield" -Element, wo der Überlauf passiert. FireFoxFlexShield ist sofort flex-item, dann setzen Sie den overflow-y: scroll zum firefoxFlexShield.

.textConvBody{ 
    height: 300px; 
    .fireFoxFlexShield{ 
     overflow-y: scroll; 
     height: 100%; 
     .scrollContainer{ 
     width: 100%; 
     max-width: 100%; 

     } 
    } 
    }

aber vorsichtig sein, denn dies könnte den Stil brechen, die mit Chrome kompatibel war ..

Quelle

2016-12-09 03:53:27 Martian2049

Können Sie erklären, welche Elemente genau hinzugefügt werden müssen? Braucht das Schild auch 'overflow-y: scroll', oder funktioniert es mit' auto'? Zu guter Letzt, gibt es Fälle, in denen diese Lösung funktionieren wird, aber @ dholberts Antwort wird unmöglich/undurchführbar oder zumindest schwieriger sein? – trysis

firefox Überlauf-y funktioniert nicht mit verschachtelten flexbox

Antwort

Verwandte Themen