Aquí está mi HTML, CSS y JS. Lo que me gustaría lograr es que cuando haga clic en el div, muestre el elemento que está posicionado absolutamente en el div principal, sin embargo, desborda al padre, por lo que estaría fuera del div con clase modalChildren y div con contenedor de clase . En este momento, se representa justo debajo del padre y parece un elemento secundario normal para el padre en lugar de desbordarse.
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>
¿Es esto lo que estás tratando de lograr? Me está costando entender exactamente cómo pretende que sea el resultado, pero los cambios que hice fueron cambiar el contenedor a una posición relativa, para que podamos diseñar el div absoluto al 100% desde la parte superior del contenedor, por lo que aparece en la parte inferior desbordada y moviendo el html para que el div absoluto sea un elemento secundario directo del contenedor.
¡Espero que eso ayude!
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>