svg适配问题 - HackerTalk

svg不能适配flex:1的大小，总是会超过容器。

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <title>标题</title>
  </head>
  <style>
    .svguse {
      background-color: red;
      height: 100%;
    }
  </style>
  <body>
    <div style="height: 150px">
      <div style="height: 100%">
        <div style="height: 100%; display: flex; flex-direction: column">
          <div class="semi-empty-image" style="flex: 1">
            <svg aria-hidden="true" class="svguse">
              <use xlink:href="#construction"></use>
            </svg>
          </div>
          <div>
            <div>建设中</div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>