Is it possible to have element overflowing scrollable parent?

adammo 0
Viewed 35

Here's my HTML, CSS and JS. What I'd like to achieve is that when you click on the div it would show the element that's positioned absolutely to the parent div, however overflowing the parent, so it'd be outside of the div with class modalChildren and div with class container. Right now it is rendered just under the parent and looks like a normal child element to the parent instead of overflowing.

    const clickMe = document.querySelector('#clickMe')
clickMe.addEventListener('click', () => {
    document.querySelector('.absoluteDiv').classList.toggle('hidden')
})
  body {
  margin: 0;
}

.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  background: gray;
}

.container {
  background: white;
  display: flex;
  flex-direction: column;
  border-radius: 5px;
  max-height: calc(100vh - 64px);
  background: white;
  padding: 16px;
  min-width: 200px;
}

h1 {
  margin: 0;
}

.buttonWrapper {
  align-self: flex-end;
}

.modalChildren {
  display: flex;
  flex-direction: column;
  overflow: auto;
}

#clickMe {
  position: relative;
}

.hidden {
  display: none;
}

.absoluteDiv {
  position: absolute;
  bottom: 0;
  left: 0;
  transform: translateY(100%);
  width: 60px;
  height: 300px;
  background: red;
}
<div class="wrapper">
  <div class="container">
    <h1>
      echo
    </h1>
    <div class="modalChildren">
      echo <br />
      echo <br />
      echo <br />
      echo <br />
      echo <br />
      echo <br />
      echo <br />
      echo <br />
      echo <br />
      <div id="clickMe">
        <span>
          click me  
        </span>
        <div class="absoluteDiv hidden">        
        </div>
        </div>
    </div>
    <div class="buttonWrapper">
      <button>
        1
      </button>
      <button>
        2
      </button>
    </div>
  </div>
</div>

javascript css html
1 Answers

Is this what you're trying to accomplish? I'm having a hard time wrapping my head around exactly what you intend the result to be like, but the changes I made were to change the container to a position of relative, so we can style the absoluteDiv 100% from the top of the container, so it shows up at the bottom overflowing, and moving the html so the absolute div is a direct child of the container.

Hopefully that helps!

const clickMe = document.querySelector('#clickMe')
clickMe.addEventListener('click', () => {
    document.querySelector('.absoluteDiv').classList.toggle('hidden')
})
body {
  margin: 0;
}

.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  background: gray;
}

.container {
  background: white;
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 5px;
  max-height: calc(100vh - 64px);
  background: white;
  padding: 16px;
  min-width: 200px;

}

h1 {
  margin: 0;
}

.buttonWrapper {
  align-self: flex-end;
}

.modalChildren {
  display: flex;
  flex-direction: column;
  overflow: visible;
}

#clickMe {
  position: relative;
  user-select: none;
  cursor: pointer;
}

.hidden {
  display: none;
}

.absoluteDiv {
  position: absolute;
  top: 100%;
  left: 0;
  width: 60px;
  height: 300px;
  background: red;
}
<div class="wrapper">
  <div class="container">
    <h1>
      echo
    </h1>
    <div class="modalChildren">
      echo <br />
      echo <br />
      echo <br />
      echo <br />
      echo <br />
      echo <br />
      echo <br />
      echo <br />
      echo <br />
      <div id="clickMe">
        <span>
          click me  
        </span>
        
        <div class="absoluteDiv hidden"></div>
      </div>
    </div>

    <div class="buttonWrapper">
      <button>
        1
      </button>
      <button>
        2
      </button>
    </div>
  </div>
</div>

async await0
Related