I am facing an issue with my flex items where some of them are displaying incorrectly in Chrome but fine in Firefox. The problem seems to be with the margin-right
of the rectangle span
within each flex item, along with the scaling of the text span
due to font-size limitations in browsers like Chrome.
#flex-container {
display: flex;
width: 50px;
}
.flex-item {
display: flex;
flex-direction: row;
align-items: center;
align-content: space-around;
margin-right: 2.1875px;
position: relative;
height: 7px;
}
.rect {
width: 5px;
height: 5px;
display: inline-block;
background: rgb(6, 74, 105);
margin-right: 0.875px;
}
.text {
position: relative;
font-size: 12px;
display: inline-block;
vertical-align: middle;
transform: scale(0.5);
transform-origin: left center;
width: 20.5px;
}
<div id="flex-container">
<div class="flex-item">
<span class="rect"></span>
<span class="text">Mazda</span>
</div>
<div class="flex-item">
<span class="rect"></span>
<span class="text">Mazda</span>
</div>
<div class="flex-item">
<span class="rect"></span>
<span class="text">Mazda</span>
</div>
<div class="flex-item">
<span class="rect"></span>
<span class="text">Mazda</span>
</div>
<div class="flex-item">
<span class="rect"></span>
<span class="text">Mazda</span>
</div>
</div>
The code snippet produces the correct result, however, the issue arises when running it on https://jsfiddle.net/xgahLv3k/1/
Refer to the demo image image, where the second item's rectangle is missing the margin-right styling.
Can you suggest a fix for this problem? Thank you!