Wie kann ich Flexbox dazu bringen, das Auffüllen in die Berechnungen einzubeziehen?

Below sind zwei Zeilen.

Erste Reih ist zwei Elemente beiflex 1 und einer beiflex 2.

Zweite Reih ist zwei Elemente beiflex 1.

Nach der Spezifikation 1A + 1B = 2A

Aber wennPolsterun ist in der Berechnung enthalten, die Summe ist falsch, wie Sie im folgenden Beispiel sehen können.

FRAG

<, p> Wie wird die Flexbox so eingestellt, dass die Auffüllung in die Berechnung einbezogen wird, damit die Boxen im Beispiel korrekt ausgerichtet sind?

.Row{
  display:flex;
}
.Item{
  display:flex;
  flex:1;
  flex-direction:column;
  padding:0 10px 10px 0;
}
.Item > div{
  background:#7ae;
}
.Flx2{
  flex:2;
}
<div class="Row">
  <div class="Item">
    <div>1A</div>
  </div>
  <div class="Item">
    <div>1B</div>
  </div>
  <div class="Item Flx2">
    <div>1C</div>
  </div>
</div>

<div class="Row">
  <div class="Item">
    <div>2A</div>
  </div>
  <div class="Item">
    <div>2B</div>
  </div>
</div>

Antworten auf die Frage(6)

Ihre Antwort auf die Frage