内联SVG在“角度材质”对话框中无法正确缩放

Question

I've been trying to implement an SVG document markup editor inside an Angular material dialog, where the screen is split between the actual SVG element (on the left) and art controls (on the right).

The problem is that the SVG must maintain its own aspect ratio instead of stretching to fill the space. Ideally it would also be centered in the screen.

Here's an sketch of what the ideal outcome would be:

*-------------------*--------------------------*
|                   |                          |
|                   |                          |
|                   |                          |
|                   |                          |
|                   |                          |
|                   |         Art              |
|      SVG          |       Options            |
|                   |                          |
|                   |                          |
|                   |                          |
|                   |                          |
|                   |                          |
*-------------------*--------------------------*

And here is what is happening:

*-------------------*--------------------------*
|                   |                          |
|                   |                          |
|                   |                          |
|                   |                          |
|                   |                          |
|                   |         Art              |
|      SVG          |       Options            |
|                   |                          |
|                   |                          |
|                   |                          |
|                   |                          |
|                   |                          |
*-------------------*--------------------------*
|                   |
|    Overflow       |
|                   |
*-------------------*

Here's the code for the dialog:

<md-dialog>
    <md-dialog-content flex layout="row">
        <div class="pdf-wrap" flex layout="column" layout-align="center center">
            <svg-wrapper></svg-wrapper>
        </div>
        <md-divider></md-divider>
        <div class="md-padding" layout="column">
            <art-options></art-options>
        </div>
    </md-dialog-content>
</md-dialog>

The only extra stylings present are:

pdf-wrap {
    padding: 10px;
}
svg-wrapper {
    width: 100%;
}

The rest is handled by default Angular-Material css rules.

Some overview: svg-wrapper is the directive that fetches the document that the user will sketch on. It compiles that svg onto the page. Adding preserveAspectRatio has no effect, no matter the options selected.

If anyone has a better understanding of what's going on, I'd appreciate some explanation of what's happening, and more importantly how to fix it.

Edit: updated with Plunkr. If you stretch the code section at different widths, you'll see that some of the pdf is shown in full view, but all is shown in constrained view (which is the desired behavior)

https://plnkr.co/edit/Or10mAmBrlDsqcKAS6BZ?p=info

Answer 1

Just add flex layout="column" to the svg-wrapper - Plunker

Markup

<md-dialog>
  <md-dialog-content flex layout="row">
    <div class="pdf-wrap" flex layout="column" layout-align="center center"  style="background:yellow">
      <svg-wrapper flex layout="column"></svg-wrapper>
    </div>
    <div class="md-padding" layout="column" style="background:red">
      <h2>Some art options here</h2>
    </div>
  </md-dialog-content>
</md-dialog>

As a suggestion, adding flex to the Art Options would be good too - Plunker

Answer 2

I ended up solving this issue programatically. I followed camden_kid's suggestion of adding flex layout="column" to svg-wrapper . Then, in the directive, I added to the style of the SVG the following:

width: auto
height: element[0].clientHeight
margin: auto

Setting the height equal to the clientHeight doesn't allow for vertical stretching unless you keep an eye on it programmatically, but it solves every other problem.