Flexboxes ausrichten nebeneinander, obwohl die Breite auf 100% eingestellt ist

Sorry für den schlechten Titel, ich bin mir nicht sicher, wie zu erklären, mein problem besser. Bitte fühlen Sie sich frei, es zu ändern, in etwas besser.

Außerdem bin ich neu flexboxes, die macht es schwieriger zu verfolgen, unten mein problem. Also habe ich ein JSFiddle zu zeigen mein problem.

CSS:

/* Layout */

#pagecontentwrapper {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  min-height: 100%;
  padding: 25px;
}
/* Inhalte */

#flexcontainer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
/* Flex */

.rowParent,
.columnParent {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-direction: normal;
  -webkit-box-orient: horizontal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
}
.columnParent {
  -webkit-box-orient: vertical;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}
.flexMother {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  -webkit-align-self: auto;
  -ms-flex-item-align: auto;
  align-self: auto;
}
.flexChild {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  -webkit-align-self: auto;
  -ms-flex-item-align: auto;
  align-self: auto;
  display: flex;
}
.topflex {
  -webkit-align-self: flex-start;
  -ms-flex-item-align: flex-start;
  align-self: flex-start;
  width: 100%;
}
.bottomflex {
  -webkit-align-self: flex-end;
  -ms-flex-item-align: flex-end;
  align-self: flex-end;
}
#aktuelles {
  border: 1px solid #004985;
}
#besucher,
#raumplan,
#media,
#topnews,
#technik {
  border: 1px solid #a0a0a0;
}
#besucher,
#raumplan,
#topnews {
  margin-bottom: 35px;
}
#aktuelles {
  margin-right: 25px;
}
#besucher,
#raumplan,
#media {
  margin-right: 12px;
}
#topnews,
#technik {
  margin-left: 13px;
}
article.news_front {
  padding: 20px;
}
article.news_front:last-of-type {
  margin-bottom: 0;
}
article.news_front:last-of-type section {
  border-bottom: none;
}
article.news_front section {
  border-bottom: 1px solid #004985;
}
article.news_front section p:first-of-type {
  display: inline;
}
article.besucher_front section {
  margin-left: 45px;
}
.topflex {
  background-color: red;
}
.bottomflex {
  background-color: grey;
}

HTML:

<div id="pagecontentwrapper">
  <div id="flexcontainer" class="flexMother rowParent">
    <div id="aktuelles" class="flexChild">
      <div class="topflex">
        <h1 class="frontpage">Aktuelles</h1>

        <article class="news_front">
          <section><span class="posttime">13. 11. 2014, 16:09&nbsp;Uhr</span>&nbsp;&nbsp;
            <p>Lorem ipsum...</p>
          </section>
        </article>
        <article class="news_front">
          <section><span class="posttime">13. 11. 2014, 12:00&nbsp;Uhr</span>&nbsp;&nbsp;
            <p>Lorem ipsum...</p>
          </section>
        </article>
        <article class="news_front">
          <section><span class="posttime">13. 11. 2014, 8:15&nbsp;Uhr</span>&nbsp;&nbsp;
            <p>Lorem ipsum...</p>
          </section>
        </article>
      </div>
      <div class="bottomflex">Historie</div>
    </div>
    <div id="rechtehaelfte" class="flexChild rowParent">
      <div id="mittlerespalte" class="flexChild columnParent">
        <div id="besucher" class="flexChild">
          <div class="topflex">
            <h1 class="frontpage">Besucher</h1>

            <article class="besucher_front">
              <p>Für heute sind keine Besucher eingetragen.</p>
            </article>
          </div>
          <div class="bottomflex">&nbsp;</div>
        </div>
        <div id="raumplan" class="flexChild">
          <div class="topflex">
            <h1 class="frontpage">Raumplan</h1>

            <article class="besucher_front">
              <p>Für heute ist keine Raumbelegung eingetragen.</p>
            </article>
          </div>
          <div class="bottomflex">&nbsp;</div>
        </div>
        <div id="media" class="flexChild">
          <div class="topflex">
            <h1 class="frontpage">Media</h1>

            <p>image here</p>
          </div>
        </div>
      </div>
      <div id="rechtespalte" class="flexChild columnParent">
        <div id="topnews" class="flexChild">
          <div class="topflex">

            <h1 class="frontpage">Top-News</h1>

            <article class="topnews_front">
              <section>
                <p>Lorem ipsum...</p>
              </section>
            </article>
          </div>
          <div class="bottomflex" id="topnews_historie">Historie</div>
        </div>
        <div id="technik" class="flexChild">
          <div class="topflex">

            <h1 class="frontpage">Technik</h1>

            <article class="news_front">
              <section><span class="posttime">3. 1. 2015, 21:36&nbsp;Uhr</span>&nbsp;&nbsp;
                <p>Lorem ipsum...</p>
              </section>
            </article>
          </div>
          <div class="bottomflex" id="technik_historie">Historie</div>
        </div>
      </div>
    </div>
  </div>
</div>

Was ich erreichen will ist, dass die .bottomflex-container positioniert ist, unter der .topflex-container, nicht weiter zu, wie es geschieht.

Kann ich, vorübergehend, erzielen diesen Effekt, wenn ich

flex-direction: column;

den .flexChild. Aber dann verliere ich das Verhalten, dass mein .bottomflex-container sitzt am unteren Rand der umgebenden box und ich verstehe, warum das passiert.

Ich bin nicht sicher, ob ich versuche, etwas zu tun, unmöglich, und müssen tun Sie es anders, oder wenn ich bin fehlen nur noch einige Zeilen code.