Почему вложенный центрированный гибкий элемент с рендерингом изображения в Firefox имеет полную ширину? ⇐ CSS

[Anonymous]

У меня есть вложенные контейнеры display: flex;. В Chrome/Edge элемент div отображается так, как предполагалось, но в Firefox 110.0.1 элемент занимает все горизонтальное пространство в оболочке (ширина 100%).
Какие свойства CSS будут отображать контейнеры в Firefox, как в Edge, или какой браузер делает это правильно в соответствии со спецификациями?
Microsoft Edge:


Firefox, изображение 1024×1024 пикселей:


Firefox, изображение 200×200 пикселей:


< h3>Код:

Код: Выделить всё

.wrapper {
outline: aqua solid;
outline-offset: -3px;
background-color: black;
color: white;
display: flex;
flex-direction: column;
/* --> */ align-items: center;
justify-content: center;
width: 300px;
height: 100px;
}

.item {
outline: magenta solid;
outline-offset: -13px;
background-color: maroon;
display: flex;
place-content: center;
place-items: center;
max-height: 100%;
max-width: 100%;
}

img {
outline: gold solid;
outline-offset: -23px;
background-color: red;
display: block;
max-width: 100%;
max-height: 100%;
}

body {
background-color: darkgray;
color: black;
}

Код: Выделить всё

1024px wide image (scaled to 100px) in 300px wrapper:



i
[img]https://placekitten.com/1024/1024[/img]
i



200px wide image (scaled to 100px) in 300px wrapper:


i
[img]https://placekitten.com/200/200[/img]
i

Подробнее здесь: https://stackoverflow.com/questions/757 ... in-firefox