How to make popap go off screen?

Question

css

I’m making a big popup with a calculator on the site, everything looks fine on the desktop, but there is a problem with mobile: when the popup height becomes larger than the screen height, then part of the popup is simply cut off and does not scroll, since position: fixed. How to make it possible to scroll popup within its height?

Thank you all in advance.

<div class="popup-calc">
      <div class="container">
            <form action="" class="content">
                  <!-- Контент -->
             </form>
      </div>
</div>

.popup-calc {
    width:100%;
    background-color: rgba(0,0,0,0.7);
    position:fixed;
    z-index: 100;
}
.popup-calc .container {
  position: relative;
  height: 100vh;
}
.popup-calc .content {
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
}

Answer 1

A little off topic, because. heavy, pulls bootstrap and moment.js with it, but I fell in love with it at first sight. Pros: momentjs has localizations out of the box, and a bunch of handy functions for working with dates. You can try to get rid of the bootstrap by plucking the styles you need. Cons are obvious: very heavy. https://eonasdan.github.io/bootstrap-datetimepicker/ ps he's pretty heavy.

Answer 2

https://github.com/eternicode/bootstrap-datepicker
https://github.com/IonDen/ion.calendar

Answer 3

https://jqueryui.com/datepicker/

Answer 4

See how it's done in bootstrap, it's a good solution.
In a nutshell - you don’t have a separate overlay and a separate popup, you have an overlay that has a fixed 0 0 100% 100% and overflow-y: auto, and in it the window itself, which has, for example, max-width 600px and margin: 10 % auto 15px;
If the content overflows, then the scroll appears at the overlay.
The second option is to make overflow-y: auto inside your modal, then the scroll will appear inside the modal