Expand child to 100% height of parent scrollable content

Question

I want to display semi-transparent overlay on scrollable search list (during loading, after changing page). But I can't expand overlay to full parent content. I can't set fixed height, because size of parent may vary depends on results number.

I was trying to set position: absolute for overlay. I was also trying with position: sticky. Last one works nicely but it needs precalculated height and it takes space before scroll.

https://jsfiddle.net/yr9xp8cs/ . With my current approach, overlay (::before) has height of visible part only.

I want to set overlay on whole content of scrollable container OR set sticky overlay which doesn't occupy any space before scroll. I don't want to use JavaScript.

Answer 1

So this is what I would do. Create wrapper for suggestions list and use overlay.

.search-results-wrapper has position styles, while .overlay has pointer-events: none to allow list below it to be scrolled (you can read full documentation here).

Basically:

none: The element is never the target of pointer events; however, pointer events may target its descendant elements if those descendants have pointer-events set to some other value. In these circumstances, pointer events will trigger event listeners on this parent element as appropriate on their way to/from the descendant during the event capture/bubble phases.

Snippet

body {
  background-color: silver;
}

.wrapper {
  position: relative;
}

.search-results-wrapper {
  position: absolute;
  top: 30px;
  left: 0;
}

.search-results {
  background-color: white;
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
  width: 300px;
  max-height: 200px;
  overflow-y: auto;
  ul {
    padding-left: 0;
  }
  li {
    list-style: none;
    padding-left: 0;
    margin: 10px 0;
    &:nth-child(even) {
      background-color: wheat;
    }
  }
}

.overlay {
  content: '';
  display: block;
  z-index: 1;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  background: white;
  opacity: 0.7;
  pointer-events: none;
}

<div class="wrapper">
  <input type="text" placeholder="Search phrase"></input>
  <div class="search-results-wrapper">
    <div class="overlay"></div>
    <div class="search-results">
      <!-- place semi transparent overlay here -->
      <div>Suggestions:</div>
      <ul>
        <li>Lorem ipsum</li>
        <li>Lorem ipsum</li>
        <li>Lorem ipsum</li>
        <li>Lorem ipsum</li>
        <li>Lorem ipsum</li>
        <li>Lorem ipsum</li>
        <li>Lorem ipsum</li>
        <li>Lorem ipsum</li>
        <li>Lorem ipsum</li>
        <li>Lorem ipsum</li>
        <li>Lorem ipsum</li>
        <li>Lorem ipsum</li>
        <li>Lorem ipsum</li>
        <li>Lorem ipsum</li>
        <li>Lorem ipsum</li>
        <li>Lorem ipsum</li>
        <li>Lorem ipsum</li>
        <li>Lorem ipsum</li>
        <li>Lorem ipsum</li>
        <li>Lorem ipsum</li>
        <li>Lorem ipsum</li>
        <li>Lorem ipsum</li>
        <li>Lorem ipsum</li>
        <li>Lorem ipsum</li>
        <li>Lorem ipsum</li>
        <li>Lorem ipsum</li>
        <li>Lorem ipsum</li>
        <li>Lorem ipsum</li>
        <li>Lorem ipsum</li>
        <li>Lorem ipsum</li>
        <li>Lorem ipsum</li>
        <li>Lorem ipsum</li>
        <li>Lorem ipsum</li>
      </ul>
      <div>Page 1/20</div>
    </div>
  </div>
</div>