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 的高度也应该降低。

我已经更新了小提琴，它似乎在 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>

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