给定一个flex容器
figure {
display: flex;
align-items: flex-start;
}
和300×300的图像,其柔性基设置在其固有宽度的一半处：
figure img {
flex: 0 0 150px;
}
Chrome 41和Safari 7忽略宽高比,并将其显示为150像素×300像素：
另一方面,Firefox 35保持固有的纵横比：
figure {
display: -webkit-Box;
display: -moz-Box;
display: Box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexBox;
display: flex;
-webkit-Box-align: start;
-moz-Box-align: start;
Box-align: start;
-webkit-align-items: flex-start;
-moz-align-items: flex-start;
-ms-align-items: flex-start;
-o-align-items: flex-start;
align-items: flex-start;
-ms-flex-align: start;
width: 100%;
border: 1px solid black;
}
figure img {
-webkit-Box-flex: 0;
-moz-Box-flex: 0;
Box-flex: 0;
-webkit-flex: 0 0 150px;
-moz-flex: 0 0 150px;
-ms-flex: 0 0 150px;
flex: 0 0 150px;
}
figure figcaption {
-webkit-Box-flex: 1;
-moz-Box-flex: 1;
Box-flex: 1;
-webkit-flex: 1 1 auto;
-moz-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
}
<figure>
<img src="//placekitten.com/g/300/300" />
<figcaption>
I'm the caption
</figcaption>
</figure>
谁是正确的？我相信规范的相关部分是Cross-size determination,但我很难解释.
解决方法
根据目前的FlexBox规范的
editors draft,这些浏览器都无法正确呈现.
当我在这里发现这个问题时,我在www风格的邮件列表中询问了这个问题,这是discussion it prompted(via readable-email.org)：
共识是,对当前草案的严格解释将表明图像的大小为300×300像素,因为这是Flex项目的最小内容大小,如果弹性项目的最小尺寸属性不能缩小到最小内容大小之下是自动(默认情况,在您的示例中为例).
Daniel Holbert(Firefox上的FlexBox实现者)继续在another thread进行这一讨论,他提出应该允许具有固有长宽比的项目缩减到低于其最小内容大小.他说：
min-content sizes aren’t really a useful lower-bound for flex items with aspect ratios. These flex items can shrink (honoring their intrinsic aspect ratio) below their min-content size,without overflowing.
无论如何,正如我所说,你的问题的答案是,两个浏览器都不是正确地呈现(按照当前的规范),但是这个规范可能会改变来处理这种情况,Firefox的目前呈现的方式将被考虑将来正确.
