How do I get an item in a flexbox to shrink its width according to its height in all browsers?

Question

I'm trying to have multiple rows of images (each in a container I want to add other stuff to) stacked above each other, with the total height being dynamic.
When using flexbox for this, I can get the height to scale properly, and Chrome adjusts the width of the container divs appropriately. However, in Firefox, the containers around the images shrink their height, but keep their original width, which leads to huge gaps.

I tried a lot of combinations of adding min-width, flex-grow, flex-shrink, etc., but I can't get the Chrome behaviour in Firefox.

Here is a snippet illustrating the problem, it looks totally different on Chrome and Firefox. (the outer container has a fixed height for easier demonstration, but in my real use case its height is dynamic)

.verticalflex {
  display: flex;
  flex-direction:column; 
  height:200px;
}

.horizontalflex {
  display: flex;
  flex-direction:row;
  min-height:100px;
  max-height:500px;
  height:500px;
}

.imgContainer {
  height:100%;
}

img {
  height:100%;
} 

<div class="verticalflex">
    <div class="horizontalflex">
        <div class="imgContainer">
            <img src="https://via.placeholder.com/500x500" />
        </div>
        <div class="imgContainer">
            <img src="https://via.placeholder.com/500x500"/>
        </div>
    </div>
    <div class="horizontalflex">
        <div class="imgContainer">
            <img src="https://via.placeholder.com/500x500" />
        </div>
        <div class="imgContainer">
            <img src="https://via.placeholder.com/500x500"/>
        </div>
    </div>
</div>

It ends up looking like this in Firefox

UPDATE: I found a smaller example to illustrate the problem: On Firefox, the width of the .imgContainer is always 500px, regardless of its calculated height (which changes when you change the height of .verticalflex). On Chrome, the width of .imgContainer is always equal o the scaled down width of the image contained. What I want to achieve is that Firefox adjusts the width of .imgContainer according to the images scaled width as well.

.verticalflex {
  display: flex;
  flex-direction:column; 
  height:200px;
}

.flexitem {  
  min-height:100px;
  max-height:500px;
  height:500px;
}

.imgContainer {
  display:inline-block;
  height:100%;
  background-color:red
}

img {
  height:100%;
}

<div class="verticalflex">
  <div class ="flexitem">
        <div class="imgContainer">
            <img src="https://via.placeholder.com/500x500" />
        </div>
    </div>
</div>

Behaviour on Firefox (I don't want this) vs Behaviour on Chrome (I want this)

Answer 1

Okay I'm gonna be honest I still don't really understand the question however here are a few things I think may be able to help.

Now I know the width is supposed to be automatic but the height of the images are fixed for sure, as for the rows:

Option 1: Grid
You decide how many items are in a row, and grid decides the rest, you only decide how tall it is and the width should be auto.

Option 2: FlexWrap
Way more flexible, there aren't any fixed items, but you need a fixed max width so it doesn't get too long. If it overflows the current width, it'll continue on the next row, and as for the spare space between the items you can do some justify-content magic, ex: space-evenly or space-around, whatever suits you.

In my example I added space-evenly so you can see the leftover space.

Editable live demo: https://jsfiddle.net/ru1tq0og/1/

const options = [
    'grid',
    'wrap'
];

const optionsWrapper = document.querySelector('.options');
const flex = document.querySelector('.flex');

for (const option of options) {
    const button = document.createElement('div');
    button.textContent = option;
    button.classList.add('option');
    // init
    if (option === 'grid') {
        button.classList.add('selected');
    } 
    button.addEventListener('click', () => {
        flex.classList = '';
        flex.classList.add('flex');
        flex.classList.add(option);
        button.classList.add('selected');
        const sibling = button.previousElementSibling || button.nextElementSibling;
        // Pretty sure I don't need this but just incase
        if (sibling) {
            sibling.classList.remove('selected');
        }
    });
    optionsWrapper.appendChild(button);
}

.flex {
    display: flex;
    width: fit-content;
}

.flex.grid {
    display: grid;
    grid-template: 100px / auto auto;
}

.flex.wrap {
    flex-wrap: wrap;
    justify-content: space-evenly;
    width: 250px;
}

.flex .item {
    display: flex;
    height: 100px;
}

.flex .item img {
    height: 100%;
}

.options {
    display: flex;
    margin-top: 20px;
}

.options .option {
    display: flex;
    background: gray;
    padding: 4px 8px;
    margin-right: 2px;
}

.options .option.selected {
    background: #ccc;
}

<div class="flex grid">
    <div class="item">
        <img src="https://via.placeholder.com/500x500" />
    </div>
    <div class="item">
        <img src="https://via.placeholder.com/500x500" />
    </div>
    <div class="item">
        <img src="https://via.placeholder.com/500x500" />
    </div>
    <div class="item">
        <img src="https://via.placeholder.com/500x500" />
    </div>
</div>

<div class="options">
</div>