IE 10-11 flex-basis property behaves differently t

2020-08-11 10:11发布

问题:

I'm trying to use the Media object, consisting of a Media-body and a Media-figure. The HTML and classes follow this form (order shouldn't matter).

.Media
   .Media-figure
   .Media-body

The simple CSS is (no prefixes):

.Media { 
   display: flex 
}

.Media-figure {
   flex: 0 0 auto;

   /* same as...
   flex-grow: 0;
   flex-shrink: 0;
   flex-basis: auto;
   */
}

.Media-body {
   flex: 1 1 0;

   /* same as...
   flex-grow: 1;
   flex-shrink: 1;
   flex-basis: 0;
   */
}

Notice that I'm tweaking the Media-figure flex-shrink factor to be 0 (as opposed to the link I posted). I'm assuming that the Media-figure is some fixed size, and we'd rather not make it smaller if we have too little room.

Using flex-basis: 0 for the Media-body should set the element to have no initial size, which then allows it to consume the rest of the available space since it is the only element with flex-grow: 1. However, in IE10-11, the flex-basis: 0 causes the Media-body width to be that of the interior elements, and destroys any wrapping behavior if there is too much content.

http://jsfiddle.net/sgardn04/3enpp4wg/

(Note: if you view these in chrome, they'll look exactly the same. Use IE10-11!)

My current workaround is to set the Media-body { flex-basis: auto }, which seems to work. I make the assumption that IE is at fault here, since I like the behavior of the webkit browsers better. Is there a legitimate interpretation of the spec that supports IEs rendering? Or any case where we could expect different behavior for webkit browsers based on the classes I have defined here? The two properties seem to behave exactly the same in this case.

EDIT: I found this handy graphic, which seems to suggest that the flex-basis property determines whether the space is distributed before or after the width of the elements is taken into account (flex-basis: 0 vs flex-basis: auto).

回答1:

The difference is due to not having a unit on the value of flex-basis. Adding this (or omitting the 0) gives you the expected behaviour in IE: updated fiddle

The MDN documentation on flex mentions this:

A preferred size of 0 must have a unit to avoid being interpreted as a flexibility. Defaults to 0% when omitted.