Why is svg not rubber?

Question

JavaScript

In angular, I added the D3 library and drew the axes of the graph. at the same time, I set values ​​for the svg viewport and the width of the parent container: STACKBLITZ DEMO
The problem is that svg does not adjust to the width of the browser window (or parent container). Please help me to solve it. Moreover, the same code works without problems outside the context of the angular: JSFIDDLE
tpl:

<div class="cost-square-wrap">
  <svg id="costSquareGraph" viewbox="0 0 1200 250"></svg> 
</div>

css:

.cost-square-wrap {
    width: 100%;
}

svg {
    width: 100%;
    min-height: 250px;
}

Answer 1

Angular requires the correct capitalization of the property name.
"viewbox"