包装器中的 2 个浮动 div 和一个 svg 线.使 SVG 线与包装器一样高

Question

我想做一个 2 列设计，其中 svg 线位于 2 列之间。如果父div（在我的示例中为 .wrapper）具有固定高度，则此方法有效。但是.left和.right是动态的，它们的身高也是如此。

这是我的例子：
https://jsfiddle.net/zo4qastn/1/

起初我认为问题与"如何使两个div都达到包装器高度的100%"相同（我没有找到好的解决方案）。我仍然认为它与它有关，但这个 svg 元素的另一个奇怪之处在于，它的高度为 150px，我不知道这是从哪里来的。
编辑 svg 元素的默认大小为 300x150。所以它涉及到："如何使两个div 100%的包装高度"

同样的小提琴.left更大：https://jsfiddle.net/zo4qastn/5/
是否可以使用 css 使 svg 行与最高列一样高？

这是小提琴的代码：

<div class="wrapper">
  <div class="left">
      BIG <br> BIG <br>BIG <br>BIG <br>BIG <br>BIG <br>
  </div>
  <svg class="line" width="10px" height="100%">
            <line x1="50%" x2="50%" y1="0%" y2="100%" stroke="#BBBBBB" stroke-width="2" stroke-linecap="round" stroke-dasharray="1, 10"/>
    </svg>
  <div class="right">
    small
  </div>
</div>
.left, .right {
  float: left;
  border: 1px solid black;
  width: 48%;
  width: calc( 50% - 5px );
  box-sizing: border-box;
  height: 100%;
}
.line {
  float: left;
}
.wrapper {
  border: 1px solid red;
}
.wrapper:after {
  display: table;
  content: " ";
  clear: both;
}

Answer 1

正如@DaniP所建议的那样，我用display:table-cell做到了：

这里的小提琴

或者检查此片段：

.left,
.right {
  border: 1px solid black;
  width: 48%;
  width: calc(50% - 5px);
  box-sizing: border-box;
  display: table-cell;
  vertical-align: top;
  height: 100%;
}
.linewrap {
  display: table-cell;
  height: 100%;
  width: 10px;
}
.wrapper {
  border: 1px solid red;
  display: table;
  width: 100%;
}

<div class="wrapper">
  <div class="left">
      BIG <br> BIG <br>BIG <br>BIG <br>BIG <br>BIG <br>BIG <br>BIG <br>BIG <br>BIG <br>BIG <br>BIG <br>BIG <br>
  </div>
  <div class="linewrap">
    <svg class="line" width="10px" height="100%">
        <line x1="50%" x2="50%" y1="0%" y2="100%" stroke="#BBBBBB" stroke-width="2" stroke-linecap="round" stroke-dasharray="1, 10"/>
    </svg>
  </div>
  <div class="right">
    small
  </div>
</div>

---

缺点是，svg 线仍然至少为 150px 高。这对我来说没有问题，因为内容总是高于 150px：https://jsfiddle.net/zo4qastn/7/