模式框的高度应符合高度内容

我正在尝试创建一个简单的模式(弹出)窗口,可以使用更少的代码行。。。尽可能基本。

模态的最大宽度为650px,高度应适合内容。如果内容溢出,则滚动条将接管。

下面的代码在Chrome上运行良好。但在Firefox和IE Edge上,模式永远不适合内容窗口。。。它总是100%高。为什么?

HTML

<a href="#" data-modal>open modal here</a>

<div class="modal">
  <div class="modal-close">CLOSE</div>
  <div class="modal-content">
    <div>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mattis cursus pulvinar. Sed tincidunt felis lorem, et semper mi venenatis at. Vivamus eu tincidunt quam. Donec nec interdum neque. Vivamus in porta diam, quis ultrices orci. Morbi vitae
        consectetur lectus. Nam eu commodo augue, vitae porttitor turpis. Donec vitae suscipit elit. Maecenas euismod leo eros, sed luctus nisi vestibulum ac. Curabitur dui eros, ornare eu purus ut, viverra auctor neque. Etiam neque enim, condimentum
        et aliquam eget, sagittis at ligula. In risus justo, elementum ac tellus id, egestas consequat odio. Maecenas tortor ipsum, porta ornare sapien eu, lobortis pellentesque urna. Sed vel dictum massa, iaculis bibendum orci. Vestibulum at libero dui.
        Suspendisse nec nisi quis dui ornare sagittis. Fusce nec congue neque. Proin ullamcorper neque vel est mattis, id ullamcorper metus elementum. Proin vitae odio tincidunt, semper ipsum in, aliquet ex. Aliquam sit amet auctor leo. Vestibulum ante
        ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla iaculis mi ut sem ultricies commodo. Sed efficitur molestie luctus. Sed lacinia leo orci, mollis dignissim sapien lacinia quis. In ac nulla in diam mattis scelerisque.
        Integer eget ipsum turpis. In quis egestas quam, quis ultricies quam. Etiam volutpat posuere massa sed vehicula. Vestibulum condimentum arcu libero, sed commodo lacus facilisis id. Interdum et malesuada fames ac ante ipsum primis in faucibus.
        Maecenas vulputate accumsan nulla. Aliquam leo leo, facilisis sed diam in, cursus suscipit nibh. Donec gravida tellus id iaculis facilisis. Aliquam ut ultricies urna. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut viverra, orci
        ac consectetur sagittis, arcu nibh faucibus odio, et iaculis mauris nunc vel libero. Praesent venenatis massa molestie massa malesuada fringilla. Maecenas pharetra dapibus neque, id tincidunt risus commodo luctus. Nulla interdum euismod sapien,
        non iaculis tortor rutrum efficitur. Duis mi est, accumsan eu ex eleifend, vulputate vehicula ex. In lacinia felis id aliquam semper. Fusce interdum vestibulum dignissim. Nullam condimentum felis dui, a ultrices tortor fringilla at. Aliquam auctor
        magna sit amet aliquam porttitor. Vivamus malesuada aliquam augue a accumsan. Aenean vulputate felis felis, sed interdum nisl aliquam ut. Suspendisse vitae felis interdum, sagittis nisi ut, luctus diam. Integer tempor erat ac lectus tempus convallis.
        Curabitur at sollicitudin neque. Vivamus molestie cursus nulla malesuada dictum. Sed ornare ligula eu diam hendrerit consectetur ut eget metus.</p>
    </div>
  </div>
</div>

CSS

* {
    box-sizing: border-box;
}

.modal {
  display: none;
  z-index: 700;
  position: fixed;
  /* center */
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  /* end- center */
  width: calc(100vw - 40px);
  max-width: 650px;
  height: fit-content;
  max-height: calc(100vh - 40px);
  overflow: auto;
  padding: 40px 20px;
  border: 10px solid #000;
  background-color: #fff;
}

.modal-close {
  position: absolute;
  z-index: 700;
  top: 10px;
  right: 10px;
}

https://jsfiddle.net/97khd8ad/18/