内联块不会在Firefox中调整为儿童大小

Question

I am trying to create a custom, responsive image-map, in which the "area"-elements, represented by "a" tags, are styled with percentages. While the following code works in Chrome and Opera, I simply can't get the desired result with Firefox:

In Chrome and Opera, it behaves like it should (as I understand) by sizing the outer div with the class "map-wrapper" to the image's size. Firefox though will always make "map-wrapper" full width, even though it is clearly styled to behave like "inline-block".

FIDDLE: Code example

HTML:

    <div class="map-container">
  <div class="map-wrapper">
    <img src="hhttps://apod.nasa.gov/apod/image/1611/ChicagoClouds_Hersch_3600.jpg" usemap="map">
    <a class="img-map-event" href="#"></a>
    <a class="img-map-event" href="#"></a>
    <a class="img-map-event" href="#"></a>
    <a class="img-map-event" href="#"></a>
    <a class="img-map-event" href="#"></a>
  </div>
</div>

CSS:

img{
  height: 100%;
}
.map-container{
  text-align: center;
  box-sizing: border-box;
}
.map-wrapper{
  display: inline-block;
  position: relative;
  max-height: 100%;
  text-align: center;
  border: 1px solid #000;
}

The desired result is that the "map-wrapper" is always perfectly surounding it's child and addapts the width and height of it.

I'm realy looking forward in solving this issue, so thank you for reading.

Answer 1

The problem was that Chrome's 100% height on images works differently than Firefox's 100%. Firefox will definitly scale to 100% of the images size while Chrome will scale to the available space.

Adding the style "height: calc(100vh - Y px);" to the image will always scale to the available space on the webpage, leading to desired result.