Center img inside smaller div not working as intended

Question

I've been trying to work this problem out, but even though there are so many solutions to it even here on stack I couldn't find one that works according to my needs.

I want to center an img inside its wrapper-div that has "overflow: hidden" so that the image could have any width possible. Problem is that the wrapper-div is aligned with another div on the same height which contains text.

I've tried solutions with absolute positioning but as the neither the width nor the height are set in a specific amount of pixels this wouldn't work and the image would no longer be displayed.

Trying to use flexbox also ended up in a mess and everything else I've tried doesn't work because of something else.

As this part containing the image and the text are part of a whole page they're dependant on quite a few other things. So I wouldn't have to post the whole code here I've prepared a codepen.

<div id="event_wrapper">
    <div id ="event_imagewrapper">
        <img id="event_picture" src="http://www.freedigitalphotos.net/images/img/homepage/87357.jpg"/>
    </div>
    <div id="event_textbox">
        <h2>Event-title</h2>
        <div id="event_text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
        <div>Continue...</div>
        <div id="event_date">01 APR</div>
    </div>
</div>

Everything inside the #event_wrapper can be manipulated but the conditions are as follows:

1. The image-wrapper may only get into the middle of the event_wrapper (covering only half of the width of it)
2. As the image will be loaded by a backend, it's impossible to use the CSS-property "background-image"
3. Images may vary in size
4. If the page is resized the text should be readable until it's very end, the picture may have more overflow (which would get hidden...)
5. Everything should stay as dynamic as possible, so setting specific heights and widths will not be possible
6. The solution should be browser-compatible (old versions of IE may be ignored... And yes I know, variables don't work in IE, this will only be used as long I'm not finished with the design! :-))

The following pictures will show what I mean:

Wrong img-positioining:

Correct img-positioning:

Anyone who can help me resolve this problem would be greatly appreciated.

Did I make a mistake somewhere along the way? Is it even possible to do this with CSS-only?

EDIT

The following Stack-Questions I have considered and they might help you identify my request and issue:

Center a large image of unknown size inside a smaller div with overflow hidden

Aligning image to center inside a smaller div

Center an image in a div too small for it?

center oversized image in div

center a big image in smaller div

You will notice that these solutions either use absolute positioning on the img, need an explicit height or width or use flexbox which in my case due to unknown reasons didn't work.

EDIT 2

As stated in my answer below I found the reason for flexbox not working in my previous attempt with the solution that was given in Center a large image of unknown size inside a smaller div with overflow hidden : The solution there used "flex:none" on the image which didn't do anything with my picture and especially did not center it in my imgs parent-div.

Answer 1

Thanks to Abhitalks I found the problem I had with the flexbox. I've adapted the codepen so that it works with flexbox now.

For everyone who's seeking a solution to this, this is what your markup should be like:

HTML

<div class="container">
    <img src=""/>
</div>

CSS

.container {
    display: flex;
    justify-content: center;
    width: 50%; /* may have any percentage */
    height: 100%; /* this is needed so that there will be no border at the bottom of the picture if window is resized */
    overflow: hidden;
    float: left; /* this can be left out if there is no textbox on the right side */
}

img {
    min-width: 100%;
    min-height: 100%;
}

Happy coding!

Answer 2

see if this helps fiddle

#event_imagewrapper {
    display: inline-block;
    position: relative;
    width: 49%;
    height: 100%;
    overflow: hidden;
    float: left;
    background: url(http://www.freedigitalphotos.net/images/img/homepage/87357.jpg);
    background-position: cover;
    background-repeat: no-repeat;
}

#event_picture {
    display: inline-block;
    width: auto;
    height: 100%;
    position: relative;
    visibility: hidden;
}

I've used the image as background of the imagewrapper then hide the image not display: none so it would take the same width and height as the previous setting.