Stretching one of the three svg in width in a block - html

Question

I need to stretching one of the three svg in a block. So, first and last svg must be always 100px width and second svg should be 100px, 200px, 1000px, but they must be closed to each other without between space.
HTML
<div class="container">
<svg viewBox="0 0 100 100">
<rect class="st0" width="100px" height="100px"/>
</svg>
<svg viewBox="0 0 500 100" preserveAspectRatio="none">
<rect class="st1" width="500px" height="100px"/>
</svg>
<svg viewBox="0 0 100 100">
<rect class="st2" width="100px" height="100px"/>
</svg>
</div>
CSS
svg {
width: 100px;
height: 100px;
}
svg rect.st2 {
fill: red;
}
svg rect.st1 {
fill: green;
width: 500px;
}
svg rect.st0 {
fill: blue;
}
.container {
display: flex;
}
JSFIDDLE

Answer 1

As the container is flex, you can just add flex-grow:1; to the svg you want to grow:
svg {
width: 100px;
height: 100px;
}
svg rect.st2 {
fill: red;
}
svg rect.st1 {
fill: green;
}
svg rect.st0 {
fill: blue;
}
.container {
display: flex;
}
.container svg:nth-child(2) {flex-grow:1;}
<div class="container">
<svg viewBox="0 0 100 100">
<rect class="st0" width="100px" height="100px"/>
</svg>
<svg viewBox="0 0 500 100" preserveAspectRatio="none">
<rect class="st1" width="500px" height="100px"/>
</svg>
<svg viewBox="0 0 100 100">
<rect class="st2" width="100px" height="100px"/>
</svg>
</div>
If you are wanting set widths of 100, 200 and 1000, then you will need to use media queries and define when you want those widths to be used

Answer 2

Here is some alternative static solution i dont know it helps or not but yes you can control individual svg by css.
.container {
display: flex;
align-items:center;
}
svg {
width: 100%;
height: 100px;
}
svg:nth-child(2) {
width: 1000px;
}
svg rect.st2 {
fill: red;
}
svg rect.st1 {
fill: green;
width: 2000px;
}
svg rect.st0 {
fill: blue;
}
JSFIDDLE