I have a div containing an image that is larger than the screen, and I've set the div to be full width with overflow hidden. It works perfectly without creating scrollbars. However, when I try to use flexbox on this div, the image gets squeezed. Interestingly, it works fine in IE because IE doesn't wrap content if it's larger than the container size. Although I tried adding 'flex-wrap: nowrap;' to make Firefox/Chrome/Opera behave like IE, it didn't work as expected.
How can I prevent flexbox from squeezing the image in Firefox/Chrome/Opera?
<div class="wrapper">
<img src="http://teleseries.com.br/wp-content/uploads/2014/04/Friends_S3_00233601_7a717bd.jpeg" alt="..."/>
</div>
body {
margin: 0;
}
.wrapper {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align:center;
-webkit-align-items:center;
-ms-flex-align:center;
align-items:center;
-webkit-box-pack:center;
-webkit-justify-content:center;
-ms-flex-pack:center;
justify-content:center;
width: 100%;
height: 500px;
position: relative;
overflow: hidden;
}
Check it out here