将 overflow-x 应用于 CSS grid-column 元素似乎也适用 overflow-y

Question

在下面的fiddle中，布局包括：

一个.Header
一个 .Container 和 display: grid;.

容器有两个 children 样式为 grid-column。第一列有一个 child 图像，它被转换并因此溢出到列的顶部和 header.

的顶部

我原以为设置 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 grid-column 元素似乎也适用 overflow-y

Applying overflow-x to a CSS grid-column element seems to apply overflow-y too

html

css

overflow

css-grid