It seems that the w-11/12 class is not behaving as expected. According to the documentation, it should give a width of 91.666% but instead, it's filling up 100%. This issue only occurs with the value 11, while other values work fine. Has anyone else experienced this bug and found a workaround?
w-full and w-11/12 are giving me the same values.
I have tried different values and they all seem correct except for w-11/12. I was expecting a width of 91.666% as stated in the documentation.
Edit: Here is an example: I am displaying a horizontal progress bar for ratings equal to 3. When around 90% of the values are at 3, it should fill 11/12th of the bar, not the entire width. The calculated values appear to be correct as shown in the inspector screenshots. The classnames and styling have been taken from flowbite docs:
<div className="flex items-center mt-4">
<span className="text-sm font-medium ">3 star</span>
<div className="w-2/4 h-5 mx-4 bg-gray-200 rounded dark:bg-gray-700">
{(ratings.filter(val => val == 3).length / ratings.length * 100 / 8.33) > 0 && (
<div
className={`h-5 bg-yellow-400 rounded w-${(ratings.filter(val => val == 3).length / ratings.length * 100 / 8.33).toFixed(0)}/12`}></div>)}
</div>
<span
className="text-sm font-medium ">{(ratings.filter(val => val == 3).length / ratings.length * 100).toFixed(0)}%</span>
</div>