My design involves nested containers with the display: flex; property. While Chrome/Edge display the item div correctly, in Firefox 110.0.1 the item div expands to fill the entire horizontal space within the wrapper (100% width).
Which CSS properties can I use to align the containers in Firefox as they appear in Edge? And which browser conforms better to the specifications?
Microsoft Edge:
https://i.sstatic.net/1eD7N.png
Firefox, image 1024×1024 px:
https://i.sstatic.net/FG6ej.png
Firefox, image 200×200 px:
https://i.sstatic.net/l61Av.png
Code:
.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;
}<p>1024px wide image (scaled to 100px) in 300px wrapper:</p>
<div class="wrapper">
<div class="item">
i<img src="https://placekitten.com/1024/1024" alt="image">i
</div>
</div>
<p>200px wide image (scaled to 100px) in 300px wrapper:</p>
<div class="wrapper">
<div class="item">
i<img src="https://placekitten.com/200/200" alt="image">i
</div>
</div>