Diese Frage hat hier bereits eine Antwort:

Ich habe Probleme, Chrome dazu zu bringen, auf den Flex-Basisteil von @ zu achteflex: 1 1 25% in einemflex-direction: column Layout. Es funktioniert gut in einemrow Layout

Das folgende Snippet veranschaulicht das Problem: Die gelben, blauen und rosa Balken sind 50px, 25% und 75% flexbasiert und werden sowohl in Spalten- als auch in Zeilenflexrichtung angezeigt.

Wenn Sie es in Firefox (oder IE11 oder Edge) ausführen, teilen Sie den Bereich wie erwartet in Spalten und Zeilen auf:

Aber wenn Sie es in Chrome (47) oder Safari (9.0.3) ausführen, scheint das Spaltenlayout auf der linken Seite die Flex-Basis vollständig zu ignorieren - die Höhen der Balken scheinen keine Beziehung zur Flex-Basis zu haben :

Dasnu Unterschied zwischen links und rechts ist dasflex-direction.

.container {
  width: 400px;
  height: 200px;
  display: flex;
  background: #666;
  position: relative;
}

.layout {
  flex: 1 1 100%; /* within .container */
  margin: 10px;
  display: flex;
}

.row {
  flex-direction: row;
}
.column {
  flex-direction: column;
}

.exact {
  flex: 1 1 50px;
  background: #ffc;
}
.small {
  flex: 1 1 25%;
  background: #cff;
}
.large {
  flex: 1 1 75%;
  background: #fcf;
}

<div class="container">
  <div class="layout column">
    <div class="exact">50px</div>
    <div class="small">25%</div>
    <div class="large">75%</div>
  </div>
  <div class="layout row">
    <div class="exact">50px</div>
    <div class="small">25%</div>
    <div class="large">75%</div>
  </div>
</div>

Ich habe versucht, @ hinzuzufügheight: 100% zu.column, wodurch Chrome auf die Flex-Basis achtet, aber ein anderes Problem verursacht - der Flex wird größer als sein Container:

.column {
  flex-direction: column;
  height: 100%;
}

Ich nehme an, das ist ein langjähriger Webkit-Fehler. Gibt es eine Möglichkeit, dies zu umgehen? (Ich versuche, einige verallgemeinerte Layout-Komponenten zu erstellen, sodass das Festcodieren einer bestimmten Anzahl von untergeordneten Elementen oder einer bestimmten Pixelhöhe nicht funktioniert.)

[EDIT] Hier ist ein zusätzliches Beispiel, das das allgemeine Problem zeigt (und die Rand- und Gesamtprobleme von mehr als 100% im obigen Beispiel vermeidet):

.container {
  width: 300px;
  height: 300px;
  display: flex;
}

.layout {
  flex: 1 1 100%; /* within its flex parent */
  display: flex;
  background: #ffc;
}

.row {
  flex-direction: row;
}
.column {
  flex-direction: column;
  height: 100%; /* attempted workaround for webkit */
}

.small {
  flex: 1 1 30%;
  background: #cff;
}
.large {
  flex: 1 1 70%;
  background: #fcf;
}

div {
  /* border/padding just makes divs easier to see --
     you can remove all of this without changing the problem */
  box-sizing: border-box;
  border: 1px solid #999;
  padding: 10px;
}

<div class="container">
    <div class="layout row">
        <div class="small">row: 30%</div>
        <div class="large layout column">
          <div class="small">row: 70%; col: 30%</div>
          <div class="large">row: 70%; col: 70%</div>
        </div>
    </div>
</div>