为什么在 Firefox 中，图像呈现全宽的嵌套居中 Flex 项目？

Question

我有一些嵌套display: flex;容器。在 Chrome/Edge 中，itemdiv 按预期显示，但在 Firefox 110.0.1 上，divitem占据了整个水平空间wrapper（100% 宽度）。

\n

哪些 CSS 属性会像在 Edge 中一样在 Firefox 上显示容器，或者哪个浏览器根据规范正确显示容器？

\n

微软边缘：

\n

\n

火狐浏览器，图像 1024\xc3\x971024 像素：

\n

\n

火狐浏览器，图像 200\xc3\x97200 像素：

\n

\n

代码：

\n

\r\n

\r\n

.wrapper {\n  outline: aqua solid;\n  outline-offset: -3px;\n  background-color: black;\n  color: white;\n  display: flex;\n  flex-direction: column;\n  /* --> */ align-items: center;\n  justify-content: center;\n  width: 300px;\n  height: 100px;\n}\n\n.item {\n  outline: magenta solid;\n  outline-offset: -13px;\n  background-color: maroon;\n  display: flex;\n  place-content: center;\n  place-items: center;\n  max-height: 100%;\n  max-width: 100%;\n}\n\nimg {\n  outline: gold solid;\n  outline-offset: -23px;\n  background-color: red;\n  display: block;\n  max-width: 100%;\n  max-height: 100%;\n}\n\nbody {\n  background-color: darkgray;\n  color: black;\n}

\r\n

<p>1024px wide image (scaled to 100px) in 300px wrapper:</p>\n\n<div class="wrapper">\n  <div class="item">\n    i<img src="https://placekitten.com/1024/1024" alt="image">i\n  </div>\n</div>\n\n<p>200px wide image (scaled to 100px) in 300px wrapper:</p>\n\n<div class="wrapper">\n  <div class="item">\n    i<img src="https://placekitten.com/200/200" alt="image">i\n  </div>\n</div>

\r\n

\r\n

\r\n

\n

Answer 1

.wrapper {
  outline: aqua solid;
  outline-offset: -3px;
  background-color: black;
  color: white;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center; 
  -ms-flex-align: center; 
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 300px;
  height: 100px;
}

.item {
  outline: magenta solid;
  outline-offset: -13px;
  background-color: maroon;
  display: -webkit-box;
  display: -ms-flexbox;
  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;
} 

try this if it works :)