title: overlapping divs within flex child
body: <p>I'm trying to position some <code>div</code>s on top of each other (i.e., overlapping) within a <code>div</code> that is a child flex element. I guess a js fiddle would help: </p>
  
  <p><a href="https://jsfiddle.net/498xpp6n/12/" rel="nofollow noreferrer">https://jsfiddle.net/498xpp6n/12/</a></p>
  
  <p>The <code>#m1</code> and <code>#m2</code> divs should appear on top of each other and take up the whole space of the <code>#mainpanel</code> div. (In this example the text 'Mainpanel1 ...' and 'Mainpanel2 ...' should appear on top of each other.) If possible, this should be done without referencing the sizes of external elements, as the layout is dynamic (as can be seen in the fiddle). </p>
  
  <p>I tried using <code>position: absolute</code>, but then they are no longer positioned relative to their parent. I've tried various other approaches but none has been successful. (I suppose I could list them, but as they were unsuccessful they would only be unnecessary clutter.)</p>