Flexbox - image on the right side - css

Question

I have an image on the right side item of a flex container. As you can see in the codepen, there is a gap when expanding the screen (caused by the max-width on the image, which is unavoidable).
However I'm just wanting to move that image to the extreme right-side, so the gap isn't as noticeable.
This needs to be friendly with IE11, and the image needs to be responsive. I would like to avoid using a float on the image if possible (would've thought there is a cleaner way of achieving this using flexbox)?
HTML:
<div class="container">
<div class="image">
<img src="http://www.stevensegallery.com/1000/1400">
</div>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus aliquid eius quia expedita illo sequi optio labore assumenda.
</div>
</div>
CSS:
.container {
background-color: red;
display: flex;
flex-direction: row-reverse;
}
.container > .image {
flex: 1 0 0%;
}
.image > img {
display: block;
max-width: 100%;
max-height: 300px;
}
.container > .text {
flex: 2 0 0%;
}
Codepen:
https://codepen.io/neilem/pen/zjpXKZ

Answer 1

You could use vertical-align instead display, then text-align:
.container {
background-color: red;
display: flex;
flex-direction: row-reverse;
}
.container > .image {
flex: 1 0 0%;
text-align:right;/* and here*/
}
.image > img {
vertical-align:top;/* here */
max-width: 100%;
max-height: 300px;
}
.container > .text {
flex: 2 0 0%;
/* and eventually */
margin:auto 0;
}
<div class="container">
<div class="image">
<img src="http://www.stevensegallery.com/1000/1400">
</div>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus aliquid eius quia expedita illo sequi optio labore assumenda.
</div>
</div>

Answer 2

Use justify-content property on container and remove flex properties form the flex-child. Your code will look like this. Hope the result is what you desired.
.container {
background-color: red;
display: flex;
flex-direction: row-reverse;
justify-content: space-between;
}
.image > img {
display: block;
max-width: 100%;
max-height: 300px;
}