Растяжка одного из трех svg по ширине в блоке

Question

Мне нужно растянуть один из трех SVG в блоке.Таким образом, первый и последний svg должны всегда иметь ширину 100px, а второй svg должен быть 100px, 200px, 1000px, но они должны быть закрыты друг для друга без пробелов.

 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

Вот несколько альтернативных статических решений, я не знаю, помогает это или нет, но да, вы можете управлять отдельным SVG с помощью 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

Answer 2

Поскольку контейнер гибкий, вы можете просто добавить flex-grow:1; к svg, который вы хотите увеличить:

 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>

Если вы хотите установить ширину 100, 200 и 1000, вам нужно будет использовать медиа-запросы и определить, когда вы хотите использовать эту ширину