I have a modal component which should have scrollable content.
On that modal component I have a datepicker input, which should popup a datepicker and this popup should be visible even when it is outside of the container component block.
Is this possible to make datepicker component to have visible overflow when the parent has overflow: scroll?
I have tried to use position: absolute but this doesn't help for my case
You can use position absolute
But you have to remain careful while positioning because
position: absoluteis not positioned w.r.t to parent element in this scenario. You can use another container forbox1andpositionitrelative
.box1 {
width: 180px;
height: 200px;
border: 1px solid black;
background-color: red;
overflow: scroll;
}
.box2 {
width: 200px;
height: 100px;
border: 1px solid black;
background-color: blue;
position: absolute;
}<div class="box1">qwertyuiopasdfghjklzxcvbnm
<div class="box2"></div>
</div>