Ширина SVG 100% не идет на полную ширину

Question

У меня есть следующий код SVG:

       <div className="behaviorPatternsItem" key={item.id}>
          <div className="behaviorPatternsItemStyled">
            <svg height="25" width="100%" preserveAspectRatio="none">
              <g>
                <rect x="0" y="0" width={item.amount} height="25" fill="red"></rect>
                <text x="25" y="17" font-size="12" fill="black"></text>
              </g>
            </svg>
          </div>
        </div>

, который выполняет следующее ..

Как вы можетевидите, нижняя красная полоса не на 100% (как item.amount).Верхняя полоса составляет 10%, средние - 90%.

Это то, что окружено контейнером и строкой для начальной загрузки.

.scrollableDiv {
  overflow-y: scroll; height:400px;
  min-width: 100%;
}
.behaviorPatternsItem{
  border-bottom: 1px solid #cdcdcd;
  font-size:12px;
  font-weight: bold;
  min-width: 100% !important;
}

.behaviorPatternsItemStyled{
  padding: 0;
  margin: 0;
  min-width: 100% !important;
}

что мне не хватает?или какие-либо советы?

Answer 1

Проблема в том, что вы вводите в item.amount следующую строку: <rect x="0" y="0" width={item.amount} height="25" fill="red"></rect> читается компилятором как значение в пикселях, а не в процентах.

Мое решение в действии: https://jsfiddle.net/k1cbjvj7/14/