flex-basis: Webkit / Blink ignore intrinsic aspect ratio

问题:

Given a flex container

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

and a 300x300 image with its flex-basis set at half its intrinsic width:

figure img {   flex: 0 0 150px; } 

Chrome 41 and Safari 7 ignore the aspect ratio and display it as 150px x 300px:

Firefox 35 on the other hand keeps the intrinsic aspect ratio intact:

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>

Who is correct? I believe the relevant section of the spec is Cross-size determination, but I'm having a hard time interpreting it.

回答1:

According the editors draft of the current Flexbox spec, neither of these browsers are rendering this correctly.

When I saw this question posted here, I asked about it on the www-style mailing list, and this is the discussion it prompted (via readable-email.org):

The consensus is that a strict interpretation of the current draft would suggest that the image be sized to 300x300 pixels because that's the minimum content size of the flex item and flex items are not supposed to shrink below their minimum content size if their min-size property is auto (the default, and the case in your example).

Daniel Holbert (Flexbox implementor on Firefox) continued this discussion on another thread where he proposed that items with an intrinsic aspect ration should be allowed to shrink to below their minimum content size. He states:

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.

Anyway, as I said, the answer to your question is that neither browser is rendering this correctly (as per the current spec), but it's possible that the spec will change to handle this case and the way Firefox is currently rendering it will be considered correct in the future.

文章来源: flex-basis: Webkit / Blink ignore intrinsic aspect ratio