Angular Material LAYOUT does not scroll my content

Question

got an complexe row/column layout and everything's fine till one problem.

In the middle I got a white area, bordered with a shadow, looking like in word or similiar text editor.

This document area is styled as DIN A 4 and should scroll in its parent.. But I can not solve this...

Heres the example:

<md-content layout="row" flex id="WorkBench">   
    <md-content layout="column" flex>
        <md-tabs flex md-dynamic-height md-border-bottom>

            <md-tab layout="row" label="New Page" flex>

                <md-content layout="column" flex style="padding-top: 20px; overflow-y: scroll">
                    <md-content layout="row">

                        <md-content id="myDocument" layout="column" style="margin-left: auto; margin-right: auto; height: 297mm; width: 210mm; border: 1px solid #999; box-shadow: 5px 5px #999;">

                            <md-content layout="row" style="padding-top: 30mm;">
                                <md-content layout="column"><div style="width: 20mm"></div></md-content>
                                <md-content layout="column"><div style="width: 70mm; font-size: 9px; border-bottom: 1px solid #999;">simle reference text</div></md-content>
                                <md-content layout="column"></md-content>
                            </md-content>
                            <md-content layout="row">
                                <md-content layout="column" style="margin-left: 25mm;">
                                    <md-content style="width: 60mm; padding: 2mm; font-size: 12px;">
                                        <md-content layout="row" style="padding: 0.5mm">1. Line</md-content>
                                        <md-content layout="row" style="padding: 0.5mm">2. Line</md-content>
                                        <md-content layout="row" style="padding: 0.5mm">3. Line</md-content>
                                        <md-content layout="row" style="padding: 1mm">4.Line</md-content>
                                    </md-content>
                                </md-content>

                                <div layout="column">????</div>
                            </md-content>
                            <div layout="row"></div>
                            <div layout="row"></div>
                            <div layout="row"></div>
                        </md-content>
                    </md-content>
                </md-content>


            </md-tab>


            <md-tab layout="row" label="other page">
                <md-content layout="column" flex class="md-padding">
                    leer
                </md-content>
            </md-tab>

        </md-tabs>
    </md-content>
</md-content>

Any hint how I could solve my problem?

id="myDocument" is the part which should get scrolled in its parent...

regards n00n

Answer 1

Ok, it's this the behavior that you want? fiddle updated I removed the dynamic heights from tabs and also removed the overflow-y: scroll on that md-content. Let me know! Good weekend