如果网格项的宽度为0px 包含宽度为 0px 且“margin-left”CSS 属性值大于 0 的元素 并放置在尺寸为“auto”的网格列轨道上 然后它会溢出 Firefox 浏览器中的网格容器。
如果网格项的宽度大于 0px（甚至 0.1px），那么它不会溢出网格容器。 仅当网格容器的“grid-template-columns”指定为“1fr auto”且网格项放置在第二列轨道上时，网格项才会溢出；如果“grid-template-columns”值为“auto 1fr”并且网格项放置在第一列轨道上，则不会发生溢出。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>margin-left causes grid item to overflow grid container in Firefox</title>
<style>
body {
margin: 0;
}
.container {
display: grid;
grid-template-columns: 1fr auto;
grid-template-rows: 1fr;
width: 320px;
height: 320px;
overflow: auto;
background-color: whitesmoke;
}
.left {
grid-template-columns: auto 1fr;
}
.item1,
.item2 {
grid-row-start: 1;
}
.item1,
.left > .item2 {
grid-column-start: 1;
}
.item2,
.left > .item1 {
grid-column-start: 2;
}
.item2 {
width: 48px;
transition: width 2s;
background-color: silver;
}
.collapsed {
width: 0;
}
.collapsed1 {
width: 0.1px;
}
.inner {
width: calc(100% - 16px);
min-width: 0;
height: 32px;
margin: 8px; /* causes overflow */
background-color: gray;
}
.no_margins {
margin: 0;
}
button {
margin: 8px;
}
</style>
<script>
const margins = function () {
document.querySelector('.inner').classList.toggle('no_margins');
}
const collapse0 = function () {
let c = document.querySelector('.item2').classList;
if (c.contains('collapsed1')) {
c.replace('collapsed1', 'collapsed')
}
else {
c.add('collapsed');
}
}
const collapse1 = function () {
let c = document.querySelector('.item2').classList;
if (c.contains('collapsed')) {
c.replace('collapsed', 'collapsed1')
}
else {
c.add('collapsed1');
}
}
const expand = function () {
document.querySelector('.item2').classList.remove('collapsed', 'collapsed1');
}
const layout = function () {
document.querySelector('.container').classList.toggle('left');
}
const load_handler = function () {
let btns = document.getElementsByTagName('button');
btns[0].addEventListener('click', margins);
btns[1].addEventListener('click', collapse0);
btns[2].addEventListener('click', collapse1);
btns[3].addEventListener('click', expand);
btns[4].addEventListener('click', layout);
}
addEventListener('load', load_handler);
</script>
</head>
<body>
<div class="container">
<div class="item1">
<button type="button">Toggle margins</button>
<button type="button">Collapse to 0px</button>
<button type="button">Collapse to 0.1px</button>
<button type="button">Expand</button>
<button type="button">Switch between 2 layouts</button>
</div>
<div class="item2">
<div class="inner"></div>
</div>
</div>
</body>
</html>我在最新版本的 Firefox 120 中发现了这一点，我不知道他们从哪个版本开始引入这些更改，但我确信早期版本不会出现这种情况。 我可以将网格项的“可见性”指定为“自动”或“隐藏”作为解决方法，或者将网格项中包含的 div 包装在另一个 div 中，并将包装器的“可见性”指定为“自动”或“隐藏” div 但我的问题是这是否是一个错误或符合与网格布局相关的规范的预期行为？
问题已确认为 Bug 1868027