Are the observed differences between firefox (left) and chrome (right) due to
- me doing something wrong/incomplete?
- browsers differences/issues?
Note: If the inner grid is commented out, both browsers are consistent.
<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
margin: 0px;
padding: 0px;
border: 0px;
background: transparent;
}
</style>
</head>
<body style='border: 10px solid steelblue;' scroll='auto'>
<div style='display: grid; grid-template-columns: 1fr; grid-template-rows: auto; border: 10px solid orange;'>
<!-- remove the following line to get consitent behavior -->
<div style='display: grid; grid-template-columns: 1fr; grid-template-rows: auto; border: 10px solid red;'>
<div style="overflow: auto;">
<div style='width: 2000px; border: 10px solid green;'>Content</div>
</div>
<!-- remove the following line to get consitent behavior -->
</div>
</div>
</body>
</html>
