I have some nested display: flex; containers. In Chrome/Edge, the item div displays as intended, but on Firefox 110.0.1 the item takes the whole horizontal space in the wrapper (100% width).
What CSS properties will display the containers on Firefox like in Edge, or which browser does it right according to the specs?
Microsoft Edge:
Firefox, image 1024×1024 px:
Firefox, image 200×200 px:
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>