柔性基础: Webkit / Blink忽略固有的纵横比

Question

给定一个挠性容器

figure {
  display: flex;
  align-items: flex-start;
}

300x300图像的弯曲基设置为其固有宽度的一半：

figure img {
  flex: 0 0 150px;
}

Chrome 41和Safari 7忽略了高宽比，并将其显示为150 pxx300px：

​

​

另一方面，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>

​

谁是对的？我相信规范的相关部分是横向尺寸测定，但我很难理解它。

Answer 1

根据当前Flexbox规范的编辑草稿，这两个浏览器都没有正确地呈现。

当我在这里看到这个问题时，我在www样式的邮件列表中询问了这个问题，这是引发了讨论 (通过可读的-email.org)：

大家的共识是，对当前草稿的严格解释将建议图像大小为300×300像素，因为这是flex项的最小内容大小，如果flex项的最小大小属性为auto (默认的，在您的示例中是这样的)，则不应该缩小到其最小内容大小以下。

Daniel (火狐上的Flexbox实现者)继续在另一个线程上进行讨论，他建议应该允许具有固有方面比例的项目缩小到其最小内容大小以下。他说：

对于具有纵横比的flex项目，最小内容大小实际上不是一个有用的下限。这些弹性项目可以收缩(尊重其内在的纵横比)低于其最小内容大小，而不溢出。

无论如何，正如我说过的，对您的问题的答案是，两个浏览器都没有正确地呈现这一点(按照当前的规范)，但是规范可能会改变以处理这种情况，而且Firefox当前呈现的方式在将来也会被认为是正确的。