Usando um flexbox com texto SVG e tspan - css, css3, svg, flexbox

Eu estou tentando ter várias caixas de texto de duas linhas posicionadas bem, da seguinte maneira:

Eu gostaria de fazer isso com um flexbox, então o texto cobriria a mesma proporção do retângulo, não importa como eu o redimensione. Aqui está minha tentativa:

.words text {
dominant-baseline: text-before-edge;
flex: 1 0 auto;
box-sizing: border-box;
}
.words {
display: flex;
justify-content: space-around;
width: 50%;
}
rect {
fill: rgba(255, 0, 0, 0.1);
}

<svg>
<rect width="300" height="100"></rect>
<g class="words">
<text>
<tspan x="0" y="0">Text</tspan>
<tspan x="0" y="1.5em">One</tspan>
</text>
<text>
<tspan x="0" y="0">Text</tspan>
<tspan x="0" y="1.5em">Two</tspan>
</text>
<text>
<tspan x="0" y="0">Text</tspan>
<tspan x="0" y="1.5em">Three</tspan>
</text>
</g>
</svg>

JSFiddle

Como é fácil de ver, o texto está apenas se acumulando em si mesmo, não se distribuindo uniformemente como eu esperava que acontecesse. Eu estou seguindo este guia, mas eu não tenho certeza se eu estou apenas não entendendo como este material flexível funciona, ou se há algumas limitações quando se trata de usá-lo com text/tspan.

Como posso usar CSS para espaçar esses SVG text tags uniformemente sobre a metade esquerda do retângulo?

Respostas:

display: flex não tem efeito no conteúdo SVG. exibição nenhum significa não renderizar, qualquer outro valor que não seja tratado de forma idêntica.