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

Question

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;*/
}

Answer 1

Did you try adding:

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

Makes the <img> max out at 100% of the parent, otherwise will only go to it's full width and no wider.

fiddle

Answer 2

set image with percentage to be bigger than the container, and minus margin according to the image size.

Example:

.image_container {
    margin:0 -10%;
    width:120%;
}

here an example I made on your code

http://jsfiddle.net/GPhzq/3/