html - 设置 SVG 初始宽度和高度

Question

所以我想将此 SVG 放在 col div 中，但我希望它与右列的高度相同。如果右侧的列较大，则一切都很好，但如果较小，则 SVG 列将获胜并决定其他列的高度。

无论如何我可以设置 SVG 的初始大小并且仍然让它在高度方面具有响应性吗？

简而言之，我想让右边的列指示其他人的高度。

.row {
  display: flex;
  width: 90vw;
}

.col {
  flex: 1;
  border: 1px solid lightgray;
}

<div class="row">
  <div class="col">
    <svg xmlns="http://www.w3.org/2000/svg" width="30" height="100%">
      <line
        x1="50%" 
        y1="100%" 
        x2="50%" 
        y2="0%"
        stroke="black" 
        stroke-width="2" />

      <circle 
        cx="50%" 
        cy="10%" 
        r="5" />
  </svg>
  </div>

  <div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
  <div class="col">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad omnis quae expedita ipsum nobis praesentium velit animi minus amet perspiciatis
  </div>
</div>

这是期望的结果:

这是 jsbin如果你想玩。

Answer 1

好吧，看来我只需要 height 和 min-height 以及一些调整:

.row {
  display: flex;
  width: 90vw;
}

.col {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  border: 1px solid lightgray;
}

.col>svg {
  flex-grow: 1;
  flex-shrink: 1;
  min-height: 20px;
  height: 20px;
  width: 30px;
}

<div class="row">
  <div class="col">
    <svg xmlns="http://www.w3.org/2000/svg">
      <line 
        x1="50%"
        y1="100%"
        x2="50%" 
        y2="0"
        stroke="darkgray" />
      <circle cx="50%" cy="50%" r="3" />
  </svg>
  </div>

  <div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
  <div class="col">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad omnis quae expedita ipsum nobis praesentium velit animi minus amet perspiciatis
  </div>
</div>