Ytukyg

So this annoying bug keeps coming up on iOS units running both Chrome and Safari.

Markup

<div class="modal">

    <div class="modal-inner">

        <div class="modal-header">Title</div>

        <div class="modal-content">…</div>

        <div class="modal-footer">Footer</div>

    </div>

    <div class="modal-background"></div>

</div>

CSS

.modal {

  position: fixed;

  z-index: 10;

  bottom: 0;

  left: 0;



  width: 100%;

  height: 100%;

}



.modal-inner {

  position: relative;

  z-index: 11;



  display: grid;

  grid-template-rows: 70px auto 97px;



  width: 100%;



  background-color: #fff;

}



.modal-header,

.modal-footer {

  display: flex;

  align-items: center;



  width: 100%;

  padding: 24px;

}



.modal-header {

  border-bottom: 1px solid #ccc;

}



.modal-footer {

  border-top: 1px solid #ccc;

}



.modal-content {

  overflow-y: auto;



  height: calc(100vh - 166px);



  padding: 24px;



  -webkit-overflow-scrolling: touch;

}



.modal-background {

  position: absolute;

  z-index: 9;

  top: 0;

  right: 0;

  bottom: 0;

  left: 0;



  width: 100%;

  height: 100%;



  background: rgba(0,0,0, 0.5);

}

Problem

You can try this code right here (CodePen) and see that it works out without a problem (iOS units). But when I remove line 43, height: calc(100vh - 166px);, I can't scroll anymore. So this is the total height of the viewport, minus the header, the footer and 1 pixel (numbers given at the grid-template-rows line). If I would change it to - 167px, or anything higher, it stops working.

I've realized that a height must be specified for .modal-content. The problem is, I want the modal to have a dynamic height based on the content (and position the content at the bottom). If the content isn't tall enough to be scrolled, I want the .modal-inner to not cover the whole screen.

Previously tried solutions

I can't do max-height: calc(100vh - 166px) and don't specify a height -- that doesn't work.

position: sticky instead of position: fixed doesn't change anything.

I've also tried to not use a CSS grid, but same problem goes for using flexbox or having the content and footer using position: absolute.

Adding a height to the element through JavaScript isn't really a solution I want to go with here, since there are tons of viewports sizes, sometimes the modal has accordions that can open/close, etc.

This is as clean I can get with my code. I've stripped tons of things to show you guys that this doesn't work, even in it's simplest form.

My searches on Google hasn't given me anything yet. I've looked at other well-known sites for guidance in their code, but none of them seem to be using this type of dynamic height-type of modal (maybe because of this bug?); one example is airbnb.com. Even with the lowest amount of content, they still go full height all the time.

Please give me guidance through this jungle, because I'm soon out hair to tear out.

Thank you!