How to get the inner div of the nested div structure into the new line using flex box?

I want the inner div (Mem 3) in the new line, just below Mem 1, and I do not want to change the div structure at any cost. Please help.

Like this =>

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

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

.flex-child {
  border: solid blue;
}

.flex-fgc {
  border: solid blue;
}

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

<!-- language: lang-html -->

<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>

<!-- end snippet -->

I tried 'flex: 1 1 100;' for the flex-inner-gc.

float can easily do this.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

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

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

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

<!-- language: lang-html -->

<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>

<!-- end snippet -->