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

Question

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

• 一个.Header
• 一个 .Container 与 display: grid;.

容器有两个样式为 grid-column 的子容器。 第一列的子图像经过转换，因此会溢出到列的顶部和标题的顶部。

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

https://jsfiddle.net/dmnsgn/kuk4065d/

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

这不是溢出 错误。这是正常行为。

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

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

• overflow-x: hidden 之所以有效，是因为它被要求在 .Container(它自己的 block 格式化上下文)中工作。
• overflow-y: visible 无法执行您期望的操作，因为它被要求在 .Container(另一个 block 格式化上下文)之外工作。

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

这里是关于 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