Wie füge ich das innere Div einer verschachtelten Div-Struktur mithilfe der Flexbox in eine neue Zeile ein?

Question

Ich möchte das innere Div (Mem 3) in einer neuen Zeile unterhalb von Mem 1 haben, und ich möchte die Div-Struktur nicht um jeden Preis ändern. Bitte helfen Sie.

Gefällt mir =>

.flex-container {
  display: flex;
  flex-wrap: wrap;
}

.flex-child {
  border: solid blue;
}

.flex-fgc {
  border: solid blue;
}

.flex-inner-gc {
  border: solid blue;
}

<div class='flex-container'>
  <div class='flex-child'>
    Mem 1
  </div>
  <div class='flex-fgc'>
    <div>
      Mem 2
    </div>
    <div class='flex-inner-gc'>
      Mem 3
    </div>
  </div>
</div>

Ich habe „flex: 1 1 100;“ für flex-inner-gc ausprobiert.

Answer 1

float 可以轻松做到这一点。

.flex-child {
  border: solid blue;
  float: left;
}

.flex-fgc > * {
  float: left;
  border: solid blue;
}

.flex-inner-gc {
  clear: both;
}

<div class='flex-container'>
  <div class='flex-child'>
    Mem 1
  </div>
  <div class='flex-fgc'>
    <div>
      Mem 2
    </div>
    <div class='flex-inner-gc'>
      Mem 3
    </div>
  </div>
</div>