Using object-fit on a <div> with child elements, including a <canvas>
<p>I have an outer container that is variable in size and width.  Suppose that inside this container, I have a canvas that I want to have grow as much as it can while maintaining proportion and not cropping.  For this, I would normally use <code>object-fit: contain</code>.</p>

<p>Now, suppose instead of just a canvas, I have a canvas with another element placed next to it.</p>

<p>HTML:</p>

<pre><code>&lt;div class="outerContainer"&gt;
  &lt;canvas width="640" height="360"&gt;&lt;/canvas&gt;
  &lt;div class="beside"&gt;
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>CSS:</p>

<pre><code>.outerContainer {
  display: flex;
  border: 0.5em solid #444;
  margin-bottom: 2em;
  object-fit: contain;
}

.outerContainer canvas {
  flex-grow: 1;
  background: #77a;
}

/* This element has a fixed width, and should be whatever height the &lt;canvas&gt; is */
.outerContainer .beside {
  flex-basis: 3em;
  flex-grow: 0;
  flex-shrink: 0;
  background: #7a7;
}
</code></pre>

<p>In this case, I want to scale the whole outerContainer size, just like I did with canvas.  The problem is that <code>object-fit</code> doesn't actually scale the element... it scales its contents.  This doesn't seem to apply to normal block elements, resulting in a case where the canvas inside is potentially skewed if there is enough width.</p>

<p><a href="https://i.stack.imgur.com/2WR1d.png" rel="noreferrer"><img src="https://i.stack.imgur.com/2WR1d.png" alt="Badly skewed canvas"></a></p>

<p>If I add <code>object-fit: contain</code> to the <code>canvas</code> element, it maintains proportion but still uses the full width, meaning the <code>.beside</code> element is all the way to the right.  This is visualized with the purple background on the canvas.</p>

<p><a href="https://i.stack.imgur.com/4zlg4.png" rel="noreferrer"><img src="https://i.stack.imgur.com/4zlg4.png" alt="Not skewed but not correct"></a></p>

<p>What I would like is the <code>outerContainer</code> to be scaled with the canvas contents, so that <code>.beside</code> always has the height of the canvas contents.  The <code>.outerContainer</code> should be centered in the parent element, taking up as much space as it can without distorting the canvas.  Like this, at any proportional scale:</p>

<p><a href="https://i.stack.imgur.com/XwZx7.png" rel="noreferrer"><img src="https://i.stack.imgur.com/XwZx7.png" alt="Desired image"></a></p>

<p>Is this doable with modern CSS?  Or must I use a scripted solution?</p>

<p>Fiddle with examples:  <a href="https://jsfiddle.net/nufx10zc/" rel="noreferrer">https://jsfiddle.net/nufx10zc/</a></p>