Get an element (img/svg/canvas) to not affect the height calculation of a flexbox and then vertically fill the result

Issue

I want to make an img/canvas/svg fit in a flexbox without effecting the flexbox's size. AND, I don't want to have to specify the size of the flexbox nor the image/svg/canvas (because I don't know it)

In other words, here's 3 flexboxes each with 2 children, the child on the right is an image/canvas/svg

And here's the code for that.

.outer,
.outer2 {
  display: flex;
  background-color: orange;
  margin-bottom: 10px;
  align-items: stretch;
}
.outer>*,
.outer2>* {
  flex: 1 1 auto;
  max-height: 100%;
  overflow: auto;
}


img,
svg,
canvas {
  display: block;
  background-color: purple;
  max-height: 100%;
  height: calc(1em + 2.5px);  /* had to guess this. It's brittle */
}

<div class="outer">
  <div>An Image</div><img src="https://via.placeholder.com/300x150">
</div>

<div class="outer">
  <div>A Canvas</div><canvas></canvas>
</div>

<div class="outer">
  <div>An SVG</div><svg viewBox="0 0 300 150"><circle cx="150" cy="75" r="48" fill="red"/></svg>
</div>

That's what I want except without having to specify the heights.

Notice I had to specify height: calc(1em + 2.5px). That height is only a guess. It might be too small or to big depending on other settings. For example if I expand the size of the first child.

To put it another way, I only want to the first child to affect the size of the flexbox. The second child I just want to stretch or shrink to fit the height of the parent.

Is it possible?

Here's one try but it fails. Though it's interesting to me that surrounding the img/canvas/svg by an extra div makes them smaller, it doesn't make them small enough.

.outer,
.outer2 {
  display: flex;
  background-color: orange;
  margin-bottom: 10px;
  align-items: stretch;
}
.outer>*,
.outer2>* {
  flex: 1 1 auto;
  max-height: 100%;
  overflow: auto;
}


img,
svg,
canvas {
  display: block;
  background-color: purple;
  max-height: 100%;
  object-fit: contain;
}

<div class="outer">
  <div>An Image</div><img src="https://via.placeholder.com/300x150">
</div>

<div class="outer">
  <div>A Canvas</div><canvas></canvas>
</div>

<div class="outer">
  <div>An SVG</div><svg viewBox="0 0 100 100"><circle cx="50" cy="50" r="48" fill="red"/></svg>
</div>

<div class="outer2">
  <div>An Image</div><div><img src="https://via.placeholder.com/300x150"></div>
</div>

<div class="outer2">
  <div>A Canvas</div><div><canvas></canvas></div>
</div>

<div class="outer2">
  <div>An SVG</div><div><svg viewBox="0 0 100 100"><circle cx="50" cy="50" r="48" fill="red"/></svg></div>
</div>

Solution

If changing to a grid is acceptable here is a snippet which wraps the img etc in a div. That div is positioned relative and the img etc within it is positioned absolute, so it doesn't influence the height of the grandparent/parent.

In this way the height is determined by the first child of outer.

.outer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background-color: orange;
  margin-bottom: 10px;
}

.outer :nth-child(2) {
  position: relative;
}

img,
svg,
canvas {
  display: block;
  background-color: purple;
  object-fit: contain;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

<div class="outer">
  <div>An Image</div>
  <div><img src="https://via.placeholder.com/300x150"></div>
</div>

<div class="outer">
  <div>A Canvas</div>
  <div><canvas></canvas></div>
</div>

<div class="outer">
  <div>An SVG</div>
  <div><svg viewBox="0 0 100 100"><circle cx="50" cy="50" r="48" fill="red"/></svg></div>
</div>

Answered By - A Haworth