Bitte um Hilfe bei css

[Rolf b]

Eine empfohlene Lösung mit EINER Description List (nicht einer pro Zeile), basierend auf Flexbox, würde ich gern sehen. Die <dt> sollen ja immer am linken Rand des Containers stehen. Wie bricht man nach einem Flex-Item um? Ich habe nur diese Möglichkeit gefunden, am <dd> ein flex-flow: row wrap zu setzen, am <dt> ein flex: 0 0 7em und am <dd> ein flex: 1 0 calc(100% - 8em). D.h. ich erzwinge den Umbruch über die Item-Breiten. Geht das auch eleganter?

Die Rahmen im Fiddle habe ich nur als Visualisierung der Item-Grenzen drin...

Update: Das funktioniert im Internet Explorer 10 gar nicht (nur mit -ms- Präfix) und im Internet Explorer 11 muss das flex: 1 0 calc(...) im dd Style aufgelöst werden zu flex-grow: 1; flex-basis: calc(100% - 8em);, das ist wohl ein bekannter IE Bug.

Rolf