Analyse und Lösung des durch Chrome 73 verursachten Flex-Layout-Zusammenbruchs

Phänomen

Es gibt mehrere verschachtelte Flex-Strukturen im Projekt:

<Stil>
  /* Allgemeiner Stil */
  .Karte {
    Breite: 200px;
    Höhe: 300px;
    Rand: 20px;
    Rand: 1px durchgezogen #999;
  }
  .flex {
    Anzeige: Flex;
    Flex-Richtung: Spalte;
  }
  .header {
    Flex: keine;
    Höhe: 40px;
    Rahmen unten: 1px durchgezogen #333;
  }
  .scroll {
    Überlauf-y: automatisch;
  }
  .P {
    Rand: 10px;
    Höhe: 400px;
    Hintergrundfarbe: rgba(0, 0, 0, 0,2);
  }  
</Stil>
  
<!-- Layout 1-->
<div Klasse="Karte Flex">
  <div class="header">Kopfzeile</div>
  <div Klasse="flex">
    <div Klasse="scrollen">
      <div Klasse="p"></div>
    </div>
  </div>
</div>
  
<!-- Layout 2-->
<div Klasse="Karte Flex">
  <div Klasse="flex">
    <div class="header">Kopfzeile</div>
    <div Klasse="scroll" Stil="flex-grow:1;">
      <div Klasse="p"></div>
    </div>
  </div>
</div>

So funktionierte es tatsächlich vor Chrome 73 (mit Electron – Chrome 69):

Dies sind alles erwartete Ergebnisse. Scroll ist der scrollbare Bereich. Der Anzeigeeffekt von Chrome 73 ist jedoch wie folgt:

Die Höhe des übergeordneten Elements wird durch das untergeordnete Element gestreckt, wodurch das Bildlaufelement nicht mehr gescrollt werden kann. was? warum?

Grund

Der Grund hierfür liegt darin, dass die Erklärung zur Höhe in der Spezifikation wie folgt kurz zusammengefasst wird:

Die Mindestgröße eines Flex-Elements (entweder Höhe oder Breite, abhängig von der Hauptachse) ist die Größe seines inneren Inhalts. Das heißt, der Standardwert für min-height/min-width ist „auto“.

ähm … Lesen Sie „Standard“ tausendmal und seine Bedeutung wird klar. Nachdem ich diese Schlussfolgerung immer wieder verstanden habe, scheint es, dass die Implementierung der neuen Version von Chrome der Spezifikation entspricht! Tatsächlich soll die Änderung von Chrome das Flex-Layout-Verhalten des Browsers näher an die Spezifikation bringen.

Dieses Problem in der Chrome-Community: Die Flexbox-Darstellung hat sich zwischen Chrome 71 und 72 geändert, es gab eine hitzige Diskussion über das oben genannte Problem (Layout 2) und es kam schließlich sogar zu einem offiziellen Rollback.

Warum wir das Problem so spät erkannten und es erst 1973 im großen Stil aufgedeckt wurde, wird in den folgenden Highlights im Detail erläutert.

Allerdings ist die Einhaltung der Normen völlig politisch korrekt und alles ist richtig! Entwickler können sich nur mit dem Trend ändern.

reparieren

Tatsächlich war ich nicht allzu schockiert, als ich dieses Phänomen sah, denn min-width hatte mir bereits einige vorbereitende Lektionen erteilt (Einzelheiten finden Sie in den folgenden Highlights). So habe ich einen Weg gefunden, mich sehr schnell zu befreien.

Suchen Sie das äußerste Element, das gestreckt ist. In den beiden obigen Layouts ist es das direkte übergeordnete Element von scroll. Das Hinzufügen des Attributs min-height: 0 kann das abnormale Layout beheben.

Wenn das Verhalten von min-height wirklich unverständlich ist, kann overflow: hidden (non-visible) den gleichen Effekt erzielen. Overflow wird normalerweise häufiger verwendet und fühlt sich physischer an, wie das folgende Beispiel zeigt:

<div Stil="Höhe: 200px;Überlauf: Scroll;">
  <div Stil="Höhe: 400px"></div>
</div>

Wenn „overflow:hidden/scroll“ für ein übergeordnetes Element festgelegt ist, blendet das übergeordnete Element den Überlaufteil des untergeordneten Elements aus, wenn dieser angezeigt wird.

Die eigentliche Funktion des Überlaufs im Flex-Layout besteht natürlich darin, die Mindesthöhe auf 0 zu setzen.

Darüber hinaus können Sie dies auch beheben, indem Sie für das untergeordnete Element, also das Bildlaufelement im obigen Beispiel, die Höhe auf 100 % festlegen. Wenn es jedoch viele Ebenen gibt, müssen die Attribute Schicht für Schicht weitergegeben werden, was nicht umweltfreundlich ist.

Highlights

Das Problem wurde erfolgreich behoben, hier sind einige Folgen ~

1. Chrome 71->72->73

Diese Änderung wurde erstmals in Chrome 72 eingeführt, aber warum haben wir sie erst in Chrome 73 bemerkt? Nach der Veröffentlichung von Chrome 72 entschied sich Chrome aufgrund der starken Resonanz, die Änderungen zunächst rückgängig zu machen, um den Entwicklern mehr Zeit zu geben, sich an die Änderungen anzupassen.

Die Veröffentlichung von Chrome 72 und das anschließende Rollback von 72 erfolgten jedoch während der chinesischen Neujahrsfeiertage und es gab kaum Benutzerfeedback. Chinesische Entwickler wie ich haben diese Warnung überhaupt nicht bemerkt. . .

2. Mindestbreite Vorschulerziehung

Warum behaupte ich, dass ich von min-width im Voraus unterrichtet wurde?

Ich habe eine Registerkarte ähnlich dem Editor implementiert:

Hier ist das verschachtelte horizontale Flex-Layout. Im Standardstil wird der Bildlaufbereich durch die untergeordneten Elemente gestreckt. Zu diesem Zeitpunkt erlebte ich zum ersten Mal die Schreibmethode „min-width: 0“, die ich damals sehr seltsam fand.

Warum müssen Sie zu diesem Zeitpunkt die Mindestbreite des übergeordneten Elements explizit deklarieren? Darüber hinaus ereigneten sich die durch dieses Upgrade verursachten Unfallverletzungen alle beim Flex des vertikalen Layouts. Hat es Auswirkungen auf den Flex des horizontalen Layouts?

Die Antwort ist eigentlich ziemlich lächerlich, da der Standardwert für die Mindestbreite bei Chrome bereits in einem sehr frühen Stadium gemäß der Spezifikation auf „auto“ eingestellt ist. . .

siehe

1. Flexbox setzt die Höhe des inneren Elements auf 0
2. MDN-Mindesthöhe
3. MDN-Mindestbreite

Zusammenfassen

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, dass der Inhalt dieses Artikels einen gewissen Lernwert für Ihr Studium oder Ihre Arbeit hat. Vielen Dank für Ihre Unterstützung von 123WORDPRESS.COM.