Why does the below code behave differently on Windows and Mac? On Windows, the content wraps or the div occupies only 50% of the browser's width, causing the content to wrap if its width exceeds 50% of the browser's width. However, on Mac, it tries to occupy 100% of the browser's width and wraps when the content width is more than 100% of the browser's width.
Check out the demo on jsfiddle here
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color:#E7E9EB;
}
#myDIV {
height:300px;
background-color:#FFFFFF;
}
.bluediv {
background-color:lightblue;
width: fit-content;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
</style>
</head>
<body>
<h1>The width: fit-content position: absolute and left 50%<</h1>
<div id="myDIV">
<div class="bluediv">
Lorem ipsum dolor sit amet. Est quidem eius et nihil modi et omnis commodi et error galisum?
</div>
</div>
</body>
</html>