OverflowScrollOverlap

Overflow scroll and overlapping child in fixed container

by shuebner81

HTML

<div class="sidebar-container">
  <div class="sidebar-content-wrapper">
    <div class="sidebar-content">
      <header class="sidebar-content-header">
        <h1>
          Overflow scroll and overlapping child
        </h1>
      </header>
      <div class="sidebar-content-main">
        <div class="lorem-container">Lorem ipsum dolor sit amet, amit sit dolor ipsum lorum. Lorem ipsum dolor sit amet, amit sit dolor ipsum lorum. Lorem ipsum dolor sit amet, amit sit dolor ipsum lorum.</div>
        <div class="lorem-container">Lorem ipsum dolor sit amet, amit sit dolor ipsum lorum.</div>
        <div class="overlap-container">
          <div class="overlap-wrapper">
            <div class="overlap-relative-container">
              <div class="overlap-box"></div>
            </div>
            <div class="overlap-caption">The box next to this text should overlap the borders of the fixed container and should also be scrolled when user scrolls the document vertically.</div>
          </div>
        </div>
        <div class="lorem-container">Lorem ipsum dolor sit amet, amit sit dolor ipsum lorum.</div>
        <div class="lorem-container">Lorem ipsum dolor sit amet, amit sit dolor ipsum lorum. Lorem ipsum dolor sit amet, amit sit dolor ipsum lorum. Lorem ipsum dolor sit amet, amit sit dolor ipsum lorum.</div>
        <div class="overlap-container">
          <div class="overlap-wrapper">
            <div class="overlap-relative-container test-relative">
              <div class="overlap-box"></div>
            </div>
            <div class="overlap-caption">The box next to this text should overlap the borders of the fixed container and should also be scrolled when user scrolls the document vertically.</div>
          </div>
        </div>
        <div class="lorem-container">Lorem ipsum dolor sit amet, amit sit dolor ipsum lorum. Lorem ipsum dolor sit amet, amit sit dolor ipsum lorum. Lorem ipsum dolor sit amet, amit sit dolor ipsum lorum.</div>
        <div...

SCSS

body {
  background: cornflowerblue;
  padding: 20px;
  font-family: Helvetica;
}

.sidebar-container {
  position: fixed;
  background: #fff;
  top: 20px;
  bottom: 10px;
  right: 0;
  width: 500px;
  z-index: 11;
  
  .sidebar-content-wrapper {
    height: 100%;
    // content should be scrollable vertically, while horizontal scroll is not allowed
    overflow-y: scroll;
    overflow-x: hidden;
    
    .sidebar-content {
      margin: 0 1em;
      
      .sidebar-content-header {
        border-bottom: 1px solid #000;
        margin: 0 1em 1em;
       
        h1 {
          font-size: 1.2em;
          font-weight: bold;
        }
      }
      
      .sidebar-content-main {
        padding: 0 0 2em;
        
        .lorem-container {
          margin-bottom: 1em;
          color: #999;
        }
        
        .overlap-container {
          margin-bottom: 1em;
          
          .overlap-wrapper {
            
            .overlap-relative-container {
              // making the container of the overlapping box relative to let the box scroll with its parent
              // WITH position: relative scrolling works as expected but overlapping box is clipped by fixed container ".sidebar-container"
              // WITHOUT position: relative the box overlaps the fixed container as desired, but this breaks scrolling the box with its parent (see ".test-relative")
              // position: relative;
              
              &.test-relative {
                position: relative;
              }
              
              .overlap-box {
                // transform: translateZ(1000); // translate3d(0,0,0);
                position: absolute;
                left: -2em;
                width: 3em;
                height: 3em;
                border: 1px solid #000;
                background: #8f0;
                z-index: 99;
              }
            }
            
            .overlap-caption {
              font-style: italic;
            }
         ...