Height of a modal box should fit the height content - html

Question

I'm trying to create a simple modal (popup) window, with the fewer lines of code posible... as basic as possible.
The modal's maximum width is 650px and the height should fit the content. If the content overflows, then the scrollbar takes over.
The following code works perfectly on Chrome. But on Firefox and IE Edge, the modal NEVER fits the content window... it is always 100% height. Why?
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/

Answer 1

The fit-content keyword is experimental and is not currently supported outside of Chrome (https://developer.mozilla.org/en-US/docs/Web/CSS/height) but you can achieve the same effect by positioning the element at 50% from top and then offsetting it by half its height:
* {
box-sizing: border-box;
}
.modal {
z-index: 700;
position: fixed;
/* center */
left: 0;
right: 0;
top: 50%; /* position half way from top */
transform: translateY(-50%); /* offset by half the element's height */
margin: auto;
/* end- center */
width: calc(100vw - 40px);
max-width: 650px;
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;
}
<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.
<!-- UNCOMMENT TO SEE THE OVERFLOW SCROLL WORKING
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>