How to prevent contraction of a flexible element smaller than its contents?

Question

I installed jsfiddle to demonstrate the problem here:
http://jsfiddle.net/x0eo3aeo/2/

HTML:

<div class="flexContainer"> <div class="flexCol1">aaa</div> <div class="flexCol2"><div style="width:100px; background-color:yellow;">bbb</div></div> <div class="flexCol3"><div style="width:250px; background-color:pink;">Hello world, some long text here to make this element stay at 250px while splitting onto multiple lines.</div></div> </div> 

CSS

 .flexContainer { display: flex; width: 100%; flex-direction: row; } .flexCol1, .flexCol3 { flex: 1; background-color: green; } 

Firefox really behaves exactly the way I want. Columns 1 and 3 are flexible until column 3 reaches the fixed size of its child div , and then only column 1 bends. However, in Chrome, both columns continue to bend the same and the child contents of column 3 overflow.

Is there a way to achieve Firefox style behavior in a cross browser?

Answer 1

You should be able to achieve Firefox behavior in Chrome by adding min-width: -webkit-min-content; in .flexCol3 . This prevents it from shrinking below its minimum width. (This is what was supposed to happen by default, due to min-width:auto introduced in the flexbox spec, but not yet implemented in Chrome .)

As noted in the comments below, IE does not seem to have the keyword min-content width, so you might need to do something hacky (e.g. min-width: 250px ). Fortunately, in next version IE (12?), Min min-width:auto implemented, so I should just be able to work like Firefox, I was told.