设置SVG初始宽度和高度

Question

所以我想在col div中使用这个SVG，但我希望它与右列的高度相同。如果右边的col更大，那么它们都很好但如果它更小，SVG列将赢得并决定其他人的高度。

无论如何，我可以设置SVG的初始大小，并且仍然可以在高度方面做出响应吗？

简而言之，我希望右列能够决定其他人的身高。

＆＃13;

＆＃13;

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

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

这是理想的结果：

如果你想玩的话，这是jsbin。

Answer 1

好吧，好像我只需要height和min-height并进行一些调整：

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;