Имейте изображение в пределах flexbox, заполняют все вертикальное пространство и остаются полностью видимыми

Question

Мне нужно иметь изображение слева от div и иметь изображение:

• Быть такой же высоты, как div (который сам имеет нефиксированную, зависящую от содержимого высоту);
• Быть полностью видимым;
• Сохранять пропорции.

Flexbox кажется идеальным для работы, но при установке изображения на 100% высоты его размерысохранить естественную ширину и содержимое переполняется под div. Смотрите фрагмент ниже:

.container {
  display: inline-flex;
  background-color: green;
}

.image {
  flex: 0 0 auto;
  background-color: purple;
}

.image img {
  display: block;
  height: 100%;
}

.right {
  flex: 1 1 auto;
  width: 100px;
  height: 100px;
  background-color: yellow;
}

<div class="container">
  <div class="image">
    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABOUlEQVRYhc2XPW6DQBCFP6bJEeLOMhKdS3dukOhT5FAcIAdJYfkKruzSnQvjCvsGSTUpdpEilMAiA7NPetXCvMfPzr5JlGBkwBbYAGtgBbz6tQdwBc7ACTgAl6Cq2s9c4UOhUtBAVv6evK9+12KqUCrUA4TbrH2NdKiBQmH/hHCbe18zyMCbwnFE8YZHX7vTQDGR+G8TxX8G0pFfe9fnSP8yUM4g3rBsG8j1ub99KGuvifh28A4sghrHOFh4TVDIdFiTGYuVQia49rqc8ekbLIGt4Hq7FTaCO1issBbcqWaFVaLwBbwYGfiW/mumheDChBUegksyVrgKLkZZ4Sy4DGeFk+AC5M1A/AYcBJdedwYGdsCl2YafwH1G8bvXjCeQRBHJzENpFLE8isEkitFstuE00fC9O8l4/gNz0YYudsoRxwAAAABJRU5ErkJggg==">
  </div>
  <div class="right">right div</div>
</div>

Красный круг обрезан, но я бы хотел, чтобы он был полностью виден, например:

Я попытался поместить изображение в отдельный div и поиграть с различными значениями переполнения, но безуспешно. Chrome в конечном итоге отобразит его правильно, если использовать dev-инструменты для отключения и включения height: 100% для элемента img, но в Firefox этого не происходит.

Answer 1

Это как-то невозможно, так как браузеру нужно как минимум две итерации, чтобы правильно рассчитать окончательную ширину, и это может создать цикл. По сути, браузер сначала игнорирует процентную высоту изображения, чтобы установить ширину / высоту контейнера, затем разрешает процентную высоту и после вычисляет ширину изображения, чтобы сохранить соотношение, но не вернется, чтобы отрегулироватьширина контейнера снова, потому что это может привести к бесконечному циклу в некоторых случаях, поэтому у вас просто будет переполнение.

Вот хак , который работает только с Chrome, где вы можетепринудительно вычислите ширину, применив анимацию.

.container {
  display: inline-flex;
  background-color: green;
}

.image {
  background-color: purple;
}

.image img {
  display: block;
  height: 100%;
  animation:hack 1s infinite linear;
}

.right {
  width: 100px;
  height: 100px;
  background-color: yellow;
}

@keyframes hack {
  to {
    height:99.9%;
  }
}

<div class="container">
  <div class="image">
    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABOUlEQVRYhc2XPW6DQBCFP6bJEeLOMhKdS3dukOhT5FAcIAdJYfkKruzSnQvjCvsGSTUpdpEilMAiA7NPetXCvMfPzr5JlGBkwBbYAGtgBbz6tQdwBc7ACTgAl6Cq2s9c4UOhUtBAVv6evK9+12KqUCrUA4TbrH2NdKiBQmH/hHCbe18zyMCbwnFE8YZHX7vTQDGR+G8TxX8G0pFfe9fnSP8yUM4g3rBsG8j1ub99KGuvifh28A4sghrHOFh4TVDIdFiTGYuVQia49rqc8ekbLIGt4Hq7FTaCO1issBbcqWaFVaLwBbwYGfiW/mumheDChBUegksyVrgKLkZZ4Sy4DGeFk+AC5M1A/AYcBJdedwYGdsCl2YafwH1G8bvXjCeQRBHJzENpFLE8isEkitFstuE00fC9O8l4/gNz0YYudsoRxwAAAABJRU5ErkJggg==" >
  </div>
  <div class="right">right div</div>
</div>