Question

在下面的小提琴中，布局包括：

a .Header
.Container display: grid;。

容器有两个使用grid-column样式的子项。第一列有一个图像作为子项进行转换，因此溢出在列的顶部和标题的顶部。

我原本期望设置overflow-x属性只会隐藏列左侧的任何额外内容，但它也会裁剪y轴溢出的图像，即使overflow-y是仍然可见。

CSS：

.Header {
  width: 100%;
  height: 200px;
}

.Container {
  display: grid;
  grid-template-columns: repeat(12, [col-start] 1fr);
  grid-gap: 24px;
}

.LeftColumn {
  grid-column: col-start 2 / span 4;
}


.LeftColumn img {
  transform: translate3d(0, -50%, 0);
}

.RightColumn {
  grid-column: col-start 6 / span 6;
}

JS：

const toggleButton = document.querySelector(".ToggleButton");
const leftColumn = document.querySelector(".LeftColumn");
let hasBug = false;

toggleButton.addEventListener("click", function() {
    hasBug = !hasBug;

  if (hasBug) {
    leftColumn.style["overflow-x"] = "hidden";
    leftColumn.style["overflow-y"] = "visible";
  } else {
    leftColumn.style["overflow-x"] = null;
    leftColumn.style["overflow-y"] = "visible";
  }
})

Answer 1

这不是overflow错误。这是正常行为。

您正在处理两个不同的容器：.Header和.Container。

您正在将overflow属性应用于.Container的后代。

overflow-x: hidden有效，因为它被要求在.Container内部工作（它自己的块格式化上下文）。
overflow-y: visible未按预期执行，因为它被要求在.Container之外工作（另一个块格式化上下文）。

换句话说，overflow属性在块格式化上下文中工作，并且通过尝试使.Container中的图像溢出到.Header，您试图让这些属性工作跨越不同的块格式化上下文。

以下是overflow属性的更多内容：

https://developer.mozilla.org/en-US/docs/Web/CSS/overflow

想到的一个合乎逻辑的选择是绝对定位。但是，在这种情况下，会导致同样的问题：

通过使用position: absolute从正常流中移除图像并使.Container成为边界框（使用position: relative），图像将再次在顶部边框处剪切。它不能与标题重叠。

目前还不清楚你的布局总体目标是什么，所以我不会尝试提供详细的解决方案，这可能涉及改变HTML，这可能不是一种选择。

考虑将图像作为网格项，并使用网格属性进行大小调整和定位。

此外，规范中有关于组合transform和overflow属性的整个部分。它可能对您有用：

https://drafts.csswg.org/css-transforms/#transform-rendering

将overflow-x应用于CSS网格列元素似乎也应用了overflow-y

1 个答案: