SVG with height 100% will never shrink below 150px - css

Question

I'm trying to create a SVG which stretches (in height) to a paragraph with variable height next to it.
Currently I have the following working example code which works as long if the paragraph is bigger then 150px. As soon as the paragraph is less in height, the SVG stops shrinking.
<div style="display: flex">
<div>
<svg style="display:block;width: 40px;height:100%">
<line x1="20" y1="0" x2="20" y2="100%" stroke-width="1" stroke="black"></line>
</svg>
</div>
<div style="height: 300px;border:1px solid">
This paragraph is 300px, the svg will stretch accordingly
</div>
</div>
<br><br><br><br>
<div style="display: flex">
<div>
<svg style="width: 40px;height:100%">
<line x1="20" y1="0" x2="20" y2="100%" stroke-width="1" stroke="black"></line>
</svg>
</div>
<div style="height: 50px;border:1px solid">
This paragraph is 50px, the svg will not shrink below 150px
</div>
</div>
This can't be solved with javascript, it should be responsive. the SVG is in practice a lot more complicated and cannot be replaced with a simple border-left: 1px solid black

Answer 1

SVGs like other replaced elements have a default size of 300x150. If they don't have enough information to calculate their width or height, they will report their default width (300) or height (150)
For your first example div, when the browser is trying to calculate its height, it will ask the first child what its height is. It will report a default of 150px (from the SVG). The second child will report 300px. So the browser will set that first div to 300px. This is the greater of its two children.
In the second div, the same process will be followed. This time the max height will be the default height of the SVG (150px) since that is larger than the other child (50px). So that section will end up at a height of 150px.
To fix this, you don't have much choice other than giving the SVG a specific height, rather than using a percentage.
<svg style="width: 40px; height:50px">
Demo:
<div style="display: flex">
<div>
<svg style="display:block;width: 40px;height:100%">
<line x1="20" y1="0" x2="20" y2="100%" stroke-width="1" stroke="black"></line>
</svg>
</div>
<div style="height: 300px;border:1px solid">
This paragraph is 300px, the svg will stretch accordingly
</div>
</div>
<br><br><br><br>
<div style="display: flex">
<div>
<svg style="width: 40px; height:50px">
<line x1="20" y1="0" x2="20" y2="100%" stroke-width="1" stroke="black"></line>
</svg>
</div>
<div style="height: 50px;border:1px solid">
This paragraph is 50px, the svg will not shrink below 150px
</div>
</div>

Answer 2

Set your viewBox accordingly, I do not know the userSpaceOnUse (min x min y width height) of your SVG, let's say viewBox="0 0 100 100".
Remove width and height attributes.
Set the style attribute to 100% width and 100% height.
override the default xMidYMid value by setting preserveAspectRatio="none"
Resulting svg should look like this:
<svg preserveAspectRatio="none" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="width:100%;height:100%;">