Flexbox - изображение на правой стороне

Question

У меня есть изображение на правой стороне гибкого контейнера. Как вы можете видеть в коде ручки, при расширении экрана есть пробел (вызванный максимальной шириной изображения, что неизбежно).

Однако я просто хочу переместить это изображение в крайнее правое положение, чтобы разрыв не был таким заметным.

Это должно быть дружно с IE11, а изображение должно быть отзывчивым. Я хотел бы избежать использования поплавка на изображении, если это возможно (я бы подумал, что есть более чистый способ добиться этого с помощью 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

Используйте свойство justify-content для контейнера и удалите свойства flex из flex-child. Ваш код будет выглядеть так Надеюсь, что результат того, что вы хотели.

.container {
  background-color: red;
  display: flex;
  flex-direction: row-reverse;

  justify-content: space-between;
}

.image > img {
  display: block;
  max-width: 100%;
  max-height: 300px;
}

Answer 2

Вы можете использовать vertical-align вместо display, затем 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>