Centering issue when using flexbox where the content is larger than the container

I'm trying to center an element (both horizontally and vertically) with the following conditions:The element's display is inline-block, since I want its width/height to be calculated depending on its content.

When the container is larger than the element everything is fine.

However, the problem starts when the element is larger than the container, and the element gets the width of the container and not its content.

Thanks in advance,Oren

Just in case jsFiddle is down, here's the code snippets:

<div class="working_area"><div class="image_container"><img src="http://eofdreams.com/data_images/dreams/bear/bear-05.jpg"/></div></div>

and

.working_area {  background: yellow;  position: absolute;    width: 600px;  height: 600px;  display: -webkit-flex;  -webkit-justify-content: center;  -webkit-align-items: center;}.image_container {  display: inline-block;     /*shrink a bit*/    -webkit-transform: scale(0.7);    /*-webkit-transform-origin: center center;*/}