I have a 3-element flexbox. One of its elements contains an iframe. I'd like the flexbox's height (cross-axis length) to be determined by the height of the iframe's source. Instead, the flexbox's height is being set to the maximum height of the other two elements.
Here's an approximation of my HTML:
<div class="elements"><div class="element-1">...</div><div class="element-2"><div>A label</div><iframe src="..."></iframe></div><div class="element-3">...</div></div>Here's an abbreviation of the CSS. Elements 1 and 3 are flexboxes too.
.elements { display: flex; flex-direction: row; align-items: stretch;}.element-1 { width: min-content; flex: 0 0 auto;}.element-2 { flex: 1 0 auto: display: grid; grid-template-rows: 1.1em 1fr;}.element-2 > iframe { width: 100%; align-self: stretch;}.element-3 { flex: 0 0 auto;}I know I can explicitly set the height of the iframe to an absolute value, but in practice I'll be changing the iframe's contents dynamically. I want my browser to read the iframe's source, determine a reasonable natural height for it, and use that when calculating the flexbox's height. Instead it shows the content in a scrolling window.
(Also, the embedded document isn't necessarily on the same host as my document, so I can't always use JavaScript to query the embedded document's dimensions.)
EDIT: My question was closed because a previously answered question said to should use JavaScript. As I stated in the last paragraph, I can't use JavaScript. Perhaps I should ask: How does a browser determine the height of an iframe if it isn't set explicitly?