使用隐藏的overflow-x和可见的overflow-y宽度绝对位置而不滚动

Question

我已经看过类似的问题，尝试了一个，但这对我的情况不起作用。

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

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

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

需要没有javascript的解决方案。

Answer 1

是否因为.grid宽度大于容器宽度？即。

container {
  width: 210px;
}

.grid {
  width: 100%;
}

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