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

i'm trying center element (both horizontally , vertically) following conditions: element's display inline-block, since want width/height calculated depending on content.

when container larger element everything fine.

however, problem starts when element larger container, , the element gets width of container , not content.

thanks in advance, oren

just in case jsfiddle down, here's 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 bit*/     -webkit-transform: scale(0.7);     /*-webkit-transform-origin: center center;*/ } 

did try adding:

.image_container img {     max-width: 100%; } 

makes <img> max out @ 100% of parent, otherwise go it's full width , no wider.

fiddle