Scale width to height (100% of parent) – Blancer.com Tutorials and projects

I’m attempting to create a webpage template with Bootstrap 5.0 fluid containers (a header and a container that adjust so that vertical scroll is never required. Inside of this container, I want to render a D3 map within a svg that will dynamically scale to 100% of its parent container’s height (whatever its parent container’s height is currently), and adjust its width accordingly to preserve aspect ratio.

I found some styling to get my container to always scale to remaining viewport height without necessitating vertical scroll, included below, but I can’t figure out how to instantiate my svg to take up only this vertical space, scale horizontally and resize.

HTML

<body>
    <div class="container-fluid" id="wrapper-div">
        <div class="container-fluid" id="header-div">
            HEADER TEXT
        </div>
        <div class="container-fluid" id="map-div">
            <svg id="map-svg"></svg>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
            crossorigin="anonymous"></script>
    <script src="https://d3js.org/d3.v5.min.js"></script>
    <script src="https://unpkg.com/topojson@3"></script>
    <script src="./index.js"></script>
</body>

let path = d3.geoPath()

let svg = d3.select("#map-svg").  <--presumably something here to establish height/width?
    .attr("preserveAspectRatio", "xMidYMid meet")
    .attr("viewBox", "0 0 960 600")

d3.json("https://cdn.jsdelivr.net/npm/us-atlas@3/counties-albers-10m.json").then(
    function(us) {

        svg.selectAll("path.county")
            .data(topojson.feature(us, us.objects.counties).features)
            .join("path")
            .attr("id", function (d) {
                return d["id"]
            })
            .attr("class", "county")
            .attr("fill", "#E7E7E8")
            .attr("stroke", "#FFFFFF")
            .attr("stroke-linejoin", "round")
            .attr("stroke-width", "0.3")
            .attr("d", path)
    }
)

CSS

* {
    margin: 0;
    padding: 0;
    border: 0;
}

html, body {
    height: 100%;
}

#wrapper-div {
    height: 100%;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    outline: 1px solid red;
}

#header-div {
    background-color: lightblue;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
}

#map-div {
    background-color: lightgreen;
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
}

#map-svg {
    background-color: lightpink;
}