Question

此简单示例在Chrome中的呈现方式与Firefox或Edge中的呈现方式不同;在一种情况下，main弹性项目缩小以适合弹性容器（设置为视口高度），但在另一种情况下则不会。渲染的差异是基于某些错误，还是其他的？

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
body {
  display: flex;
  flex-direction: column;
}
main {
  display: flex;
  background: #f60;
}

<main>
    <!-- any element longer than the viewport -->
    <img src="https://i.redd.it/e7a2rxhf1yrx.jpg">
</main>

修改：a more clear example。

Answer 1

似乎flexbox目前在浏览器中没有正确缩小replaced elements像图像（具有固有宽高比），至少！我相信这就是这里发生的事情。

（我读过类似here的内容，并遇到了图像作为弹性项here的问题）

<强>解决方案：一种解决方案是在flex项目上使用max-height: 100%，如果它应该始终填充父级高度，您甚至可以使用flex-basis: 100%：

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
body {
  display: flex;
  flex-direction: column;
}
main {
  display: flex;
  background: #f60;
  max-height: 100%;
}

<main>
    <!-- any element longer than the viewport -->
    <img src="https://i.redd.it/e7a2rxhf1yrx.jpg">
</main>

Answer 2

关于浏览器如何解释弹性框中弹性框的属性，似乎是不一致的，但我设法通过将内框的高度设置为0然后设置弹性框，使其在浏览器中一致地工作在外部柔性盒内生长100％（或1）。以下是使用代码的示例。

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
body {
  display: flex;
  flex-direction: column;
}
main {
  display: flex;
  background: #f60;
  height: 0;
  flex-grow: 1;
}

<main>
    <!-- any element longer than the viewport -->
    <img src="https://i.redd.it/e7a2rxhf1yrx.jpg">
</main>

嵌套在列Flex容器中的行flex容器具有显式高度，在Chrome和Firefox中呈现的方式不同

2 个答案: