html - 使用隐藏的 overflow-x 和可见的 overflow-y 宽度绝对位置，无需滚动

Question

我见过类似的问题，也试过一个，但这对我的情况不起作用。

这就是我想要的:白色和红色矩形是绝对位置。悬停在红色上触发白色。在这张图片上 overflow-x 被禁用。

因为我需要隐藏蓝色框外的红色矩形，所以我添加了overflow-x: hidden，当鼠标悬停在红色矩形上时它会导致y滚动。像这样:

.container {
  width: 210px;
}
.grid {
  position: relative;
  overflow-x: hidden;
  width: 100%;
  height: 210px;
  background: #333344;
}
.grid__item {
  position: absolute;
  height: 200px;
  width: 200px;
  background: #994444;
}
.grid__item .grid__item-hover {
  display: none;
  position: absolute;
  bottom: -50px;
  height: 50px;
  width: 100%;
  background-color: white; 
}
.grid__item:hover .grid__item-hover {
  display: block;
}
.grid__item:nth-child(1) {
  left: 5px;
  top: 5px;
}
.grid__item:nth-child(2) {
  left: 210px;
  top: 5px;
}
.bar {
  height: 100px;
  background: #aaaaaa;
}

<div class="container">
  <div class="grid">
    <div class="grid__item">
      <div class="grid__item-hover"></div>
    </div>
    <div class="grid__item">
      <div class="grid__item-hover"></div>
    </div>
  </div>
  <div class="bar"></div>
</div>

需要没有 javascript 的解决方案。

Answer 1

是不是因为你的 .grid 宽度大于你的 container 宽度？即

container {
  width: 210px;
}

.grid {
  width: 100%;
}

我是说 100% 的 .grid 宽度大于 210px 的容器宽度，因此出现了滚动条。尝试使容器宽度大于网格宽度。