Flex-Column: Bildhöhe an Fenster anpassen

[Gerd Richter]

Hallo,

ich habe folgendes Problem:

Ich habe eine Überschrift und darunter ein Element, beide sollen zusammen genau 100% der verfügbaren Höhe des Browsers ausfüllen (heißt: keine Scrollbar, Größe der Elemente ändert sich mit Browserhöhe).

Das funktioniert auch, solange ich kein Bild einfüge, dann wird es kritisch:

Meine Styles:

body {
	margin: 0;
	padding: 0;
}
#Buehne {
	display: flex;
	flex-direction: column;
	width: 100vw;
	height: 100vh;
}
section {
	flex: 1 0 auto; // fülle den verfügbaren Rest von height aus!
}
img {
	width: auto;
	height: 100%; // fülle 100% des Elternelements (Section) aus!
}

HTML dazu:

<div id="Buehne">
	<header><h1>Überschrift</h1></header>
	<section><img src="./Bilder/Grafik.svg" alt="Grafik" height="900" width="600" /></section>
<!-- height & width hier für die Aspect-Ratio, wird aber von CSS überschrieben -->
</div>

RESULTAT: Funktioniert so leider nicht, Bild produziert einen "overflow" und damit eine Scrollbar.

==> Wie schaffe ich es, dass alle Elemente im BODY genau die Höhe des Browserfensters ausfüllen?

Danke für eure Hilfe!