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

Question

I've seen similar questions, have tried one, but this is not worked for my case.

Here is what I want: White and red rect is absolute position. White triggered by hover on red. On this picture overflow-x is disabled.

Because I need hide red rectangles outside the blue box, I added overflow-x: hidden , and it causes y scroll when hovered red rect. Like this:

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

Need solution without javascript.

Answer 1

Is it because your .grid width is greater than your container width? ie

container {
  width: 210px;
}

.grid {
  width: 100%;
}

I am saying .grid width of 100% is greater than container width of 210px, therefore the scroll bar is appearing. Try making the container width greater than the grid width.