"width: -moz-fit-content" doesn't work in Firefox?

Question

Expected behavior (happens in Chrome):

• If the window size is wide enough, there is space between left and right content without the grey background
• If the window size is narrow, there's grey background on top and on the bottom of image

What happens in Firefox: When the window size is wide, there's grey background between left and right content

On #detail-image-container I've tried using display: inline-element and float: left, but neither worked. Display:table made it so that there's no space between left and right content, also the image overflows. Any suggestion on how to make the expected behavior work in Firefox?

The code can be viewed here: https://jsfiddle.net/7k3rtnom/1/

HTML:

<div id='page-container'>
    <div id='detail-container-left'>
        <div id='detail-image-container'>
            <img id='detail-image'
                src='https://upload.wikimedia.org/wikipedia/commons/thumb/b/b1/VAN_CAT.png/900px-VAN_CAT.png?20200421225150'
                alt="cat" />
        </div>
    </div>
    <div id='detail-container-right'>
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Et odio recusandae incidunt inventore quia consequuntur sapiente laudantium molestiae quaerat quae accusantium, sint esse, repudiandae, animi libero nostrum officia natus error necessitatibus optio. Harum, a? Pariatur aliquam beatae iusto voluptates adipisci unde accusamus dolor blanditiis quod maxime alias facere reiciendis nostrum quam sed earum, inventore saepe repellat suscipit. Molestiae dolores inventore, eos doloribus iure quam quas tenetur unde ex eligendi sed repudiandae labore facere dignissimos provident animi exercitationem illum est sint expedita ratione. Id nemo hic omnis ab ullam deserunt magnam at animi dignissimos, inventore exercitationem aliquid minima consequatur rem numquam.</p>
    </div>
</div>

CSS:

#page-container {
        width: 100vw;
        padding: 2vw;
        max-height: 100vh;
        background-color: aquamarine;
        display: flex;
    }

    #detail-container-left {
        max-height: 100%;
        width: 55%;
    }

    #detail-image-container {
        width: -moz-fit-content;
        width: fit-content;
        block-size: fit-content;
        height: 100%;
        background-color: #3b3f3e;
        display: flex;
        align-items: center;
    }

    #detail-image {
        max-width: 100%;
        max-height: 100%;
        aspect-ratio: 1/1;
        align-self: center;
    }

    #detail-container-right {
        width: 45%;
        max-height: 100%;
        background-color: white;
        padding: 20px;
        overflow-y: scroll;
    }