0

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.

What I want

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.

Sebastian Brosch
  • 42,106
  • 15
  • 72
  • 87
cassln
  • 722
  • 2
  • 6
  • 18
  • Not sure you can simply 'hide' the scrollbar. It's there when a scroll is available. You probably could hack it around and maybe have the scrollbar outside of the element (using `overflow:hidden` to hide it), but that's not a very straightforward solution. See: http://stackoverflow.com/questions/3296644/hiding-the-scrollbar-on-an-html-page – Narxx Jun 06 '16 at 13:30

1 Answers1

0

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

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.

Atrix
  • 299
  • 2
  • 6
  • `100%` means that grid width is exact the as container width. Even if it will be grater, it is does not matter because this is vertical scroll, it depends on height, not width. – cassln Jun 06 '16 at 09:56