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
).