Firefox flexbox image width

Question

I\'m having some trouble getting my image to take up no more than 100% of the available width of the parent container. I\'m only noticing the issue in Firefox 36 (not IE or

Answer 1

You need to add min-width:0 on .middleColumn, if you want to allow it to shrink below its min-content width (the intrinsic width of its -child).

Otherwise, it gets the new default min-width:auto, which on a flex item will basically make it refuse to shrink below its shrinkwrapped size.

(Chrome hasn't implemented min-width:auto yet. I'm told IE has, in their next-gen rendering engine, so I'd expect that version should behave like Firefox here -- as will Chrome, once they implement this feature.)

Snippet with that fixed:

  
    
  
  
    

      

        
This is the left column!
        

          
        
        
This is the right column!