Have image within flexbox fill all vertical space and remain fully visible

问题

I need to have an image to the left of a div, and have the image:

Be the same height as the div (which itself has non-fixed, content-dependent height);
Be fully visible;
Maintain its aspect ratio.

Flexbox seems perfect for the job, but when setting the image to 100% height, its dimensions retain the natural width and the content overflows under the div. See snippet below:

.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>

The red circle is clipped but I'd like it to be entirely visible, like so:

I've attempted placing the image in its own div and playing around with various overflow values with no success. Chrome will eventually display it right when using dev tools to disable then enable height: 100% on the img element, but this doesn't happen in Firefox.

回答1:

This is somehow impossible as the browser need at least two iterations to correctly calulate the final width and this may create a cycle. Basically the broswer will first ignore the percentage height of the image to set the width/height of the container then will resolve the percentage height and after will calculate the width of the image to keep the ratio but it won't go back to adjust the width of the container again because it may lead to an infinite loop in some cases, that's why you will simply have an overflow.

Here is a hack that works only with Chrome where you can force the calculation of the width again by applying an animation.

.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>

来源：https://stackoverflow.com/questions/58350222/have-image-within-flexbox-fill-all-vertical-space-and-remain-fully-visible

标签

html

css

flexbox