javascript - SVG 高度缩放不符合预期

Question

我有一个两列布局，我想在左边绘制一个 svg，在右边绘制一些元素。我希望 SVG 的高度根据第二列(即右边的一列)的高度进行缩放。为了实现两列布局，我使用了 flex-box css。这是 jsfiddle显示问题。

谁能帮我解决我做错了什么。

    <div class="row">
    <div class="col">
        <svg style="width:100%;height:100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
            <rect width="100%" height="100%" x="0" y="0" fill="#E61875" rx='10' ry='10' />
        </svg>
    </div>
    <div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad omnis quae expedita ipsum nobis praesentium velit animi minus amet perspiciatis laboriosam similique debitis iste ratione nemo ea at corporis aliquam.</div>
</div>

期望的结果是如果 2nd Div 的高度增加，SVG 的高度也应该增加，同样如果 2nd Div 的高度减少，那么 SVG 的高度应该减少。

我已经更新了 fiddle ，它似乎在 firefox 中工作，但在 chrome 中，它正在将高度设置为 150px 并且没有更改值。我仍然没有找到解决方法。

Answer 1

目前尚不清楚问题出在哪里，因为您的 JSfiddle 不包含 SVG。

要使 SVG 成为列的完整高度，您需要移除填充并将 SVG 设置为 display:block。

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.row {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}
.col {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  border: solid;
}
svg {
  display: block;
}

<div class="row">
  <div class="col">
    <div style="width:60px;height:100%;">
      <svg style="width:100%;height:100%" viewbox="0 0 50 100" version="1.1" xmlns="http://www.w3.org/2000/svg">
        <rect width="100" height="100" x="0" y="0" fill="#E61875" rx='10' ry='10' />
      </svg>
    </div>
  </div>
  <div class="col">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad omnis quae expedita ipsum nobis praesentium velit animi minus amet perspiciatis laboriosam similique debitis iste ratione nemo ea at corporis aliquam.</p>
  </div>
</div>

此外，尚不清楚最终结果应该是什么样子。我怀疑可能需要进行一些调整。