How to stop a div inside a scrollable div being hidden

HTML & CSS
4

I think this should work…

.containingDiv{  position: relative;

}

.searchBox {
  padding: 0px;
  overflow-y: auto;
  overflow-x: hidden;
  height: 140px;
  background: white;
  
}
.searchResults {
  padding: 5px 10px;
  color: #333;
  min-height: 50px;
}
.Options {
  height: 17.7px;
  vertical-align: middle;
}
.Options a span {
  display: none;
  border-radius: 5px;
  white-space: nowrap;
}
.Options a:hover span {
  display: block;
  position: absolute;
  top: 15px;
  padding: 5px;
  margin: 10px;
  z-index: 100;
  text-align: left;
  background: white;
  box-shadow: 1px 1px 10px black;
  color: green;
}

they KEY here is: give containingDiv relative position…and have NO OTHER descendants of containingDiv have relative or absolute position until .Options a:hover span. Options a:hover span will then be placed in the same layer as the containingDiv and thus be outside the overflow hidden given to .searchBox.

hope that helps