Flex Box (maybe?) doesn't wrap correctly #37243
Description
Describe the bug:
Following ideally should be displayed as 3 x 3. Because 20.25 rem == (6.25 + 0.25 + 0.25) * 3.
However, for both Firefox and Servo, it sometimes can only have two items per row. This only happens for certain root font-size value. Scroll to adjust the value and see.
To Reproduce:
<html lang="en">
<head>
<style>
html {
font-size: 18.9px;
}
.flex-container {
width: 20.25rem;
display: flex;
flex-wrap: wrap;
}
.flex-item {
width: 6.25rem;
height: 6.25rem;
line-height: 6.25rem;
border: 0.1875rem solid #fce5b9;
margin: 0.25rem;
box-sizing: border-box;
text-align: center;
}
</style>
</head>
<body>
<label for="fontSizeSlider">
Adjust root element font-size to change computed value in px for margin and width, which has fixed value in "rem"
</label>
<input type="range" id="fontSizeSlider" min="10" max="30" value="18.9" step="0.1">
<div class="flex-container">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
<div class="flex-item">5</div>
<div class="flex-item">6</div>
<div class="flex-item">7</div>
<div class="flex-item">8</div>
<div class="flex-item">9</div>
</div>
<script>
document.getElementById("fontSizeSlider").addEventListener("input", function() {
document.documentElement.style.fontSize = this.value + "px";
});
</script>
</body>
</html>Platform:
All