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

CodePudding user response：

You can use position absolute

But you have to remain careful while positioning because position: absolute is not positioned w.r.t to parent element in this scenario. You can use another container for box1 and position it relative

.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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>