установить 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>