Höhe eines Flexbereichs

[Rolf b]

Hallo zusammen,

ich rätsele gerade an Folgendem herum. Meine HTML soll eine n-fache Wiederholung folgender Grundstruktur enthalten:

<section>
<article class="formatiert">
</article>
<article class="raw">
</article>
</section>

Von diesen Sections will ich eine ganze Menge erzeugen, der linke article enthält eine formatierte Darstellung, der rechte article die Rohdaten (zum Vergleich, ob die formatierte Darstellung den Wünschen entspricht). Per Flexbox setze ich die beiden Articles nebeneinander.

Mein Problem: Die Höhe jeder einzelnen Section soll durch die formatierte Darstellung bestimmt werden, also durch die inhaltsabhängige Höhe des article.formatiert. Sind die Rohdaten kürzer - kein Problem. Sind sie länger, soll's einen Scrollbar geben. Die Höhe kann stark variieren, manche Sections werden nur 2-3 Zeilen haben, andere 30 oder 50. Ich kann also keine Normhöhe für alle vorgeben.

Geht das per CSS? Besonders gefallen würde mir eine Lösung, die im IE11 funktioniert, das ist aber nicht zwingend.

Ich habe zur Zeit eine Behelfslösung, die ich gern auf Flexbox umstellen würde. Hat jemand eine Idee?

section {
  position: relative;
}
article {
  white-space: pre;
}
article.formatiert {
  width: 50%;
}
article.raw {
   position: absolute;
   top: 0; left: 50%; width: 50%; height: 100%;
   overflow-y: scroll;
}

Natürlich bekommt die fertige Lösung noch ein paar Borders etc. dazu, damit habe ich keine Probleme. Es geht mir hier nur um den gewünschten Höhen-Effekt.

Rolf