Here is the SVG code snippet I am currently working with:
<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>
I have noticed that the bottom red bar is not extending to 100% like item.amount. The top bar represents 10%, while the middle bars are set at 90%.
To provide context, this SVG code exists within a container and row for Bootstrap.
.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;
}
Any insights on what could be causing this issue or tips for improvement?