css - 如何使 SVG 在 flexbox 内的 div 中调整大小？

Question

我的任务是根据 flexbox 的大小调整 SVG 的大小。

如果我删除<div>that 的父级<svg>，则 SVG 会正确缩放；但是，我不能这样做，因为需要有一个兄弟姐妹<svg>

我尝试了 flex-grow、flex-shrink、使用 height、max-height，但它们都不适合我，我很困惑。

澄清一下，底部#console应该是固定高度（或不低于特定高度）。顶部#shape应根据剩余高度调整大小。很多东西都是在 1000x500 的 viewbox 中绘制的，所以改变 viewbox 也不可行。

HTML（我在这里使用 Vue，但我认为这并不重要）

<template>
  <div id="app">
    <div id="main">
      <div id="shape">
        <svg viewBox="0 0 1000 500">
            <polygon points="200,100 200,400 800,400 800,100" style="fill:lime" />
        </svg>
        <div style="position: absolute">I wanted to put something here to be the same size of this flexbox, so I need to wrap the SVG inside the div.</div>
  </div>
      <div id="console">
        Some fixed height item
      </div>
    </div>
  </div>
</template>

CSS

<style>
  #main {
    height: 95vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  #shape {

  }
  #console {
    height: 600px;
    background-color: black;
    color: white;
  }
</style>

或在 Codepen 中查看：https ://codepen.io/kritsada_stw/pen/xxZowQX

标签： cssvue.jssvgflexbox