如何防止SVG撑大DIV高度？实现SVG容器高度自适应

我希望页面中的SVG能适配容器框架，目前宽度适配正常，但当SVG高度超出容器时，页面会被撑高并出现滚动条（红色SVG元素）。

请问如何限制高度增长，让SVG始终适配容器？

当前代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        * {
            box-sizing: border-box;
        }

        html,
        body {
            padding: 0;
            margin: 0;
            font-family: 'Courier New', Courier, monospace;
            font-weight: bold;
            font-size: 20px;
        }

        .full {
            background-color: cadetblue;
            height: 100vh;
            display: flex;
            flex-direction: column;
            border: 5px solid rgb(255, 0, 225);
        }

        .top {
            background-color: brown;
            color: white;
            height: 20vh;
            flex: 0 0 auto;
        }

        .bottom {
            display: flex;
            flex-grow: 1;
        }

        .left {
            background-color: rgb(70, 124, 168);
            width: 400px;
            border: 5px solid rgb(20, 255, 36);
            flex: 0 0 auto;
        }

        .right {
            background-color: rgb(255, 140, 0);
            color: white;
            /* flex: 1 1 auto; */
            border: 5px solid rgb(20, 224, 255);
            display: flex;
            align-items: center;
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
    <div class="full">FULL
        <div class="top">
            TOP
        </div>
        <div class="bottom">
            <div class="left">LEFT</div>
            <div class="right">

                <svg class="scaling-svg" width="100%" height="auto" viewBox="0 0 300 300">
                    <rect fill="#FF0000" height="296" id="svg_2" stroke="#000000" width="296" x="2" y="2" />
                </svg>

            </div>
        </div>
</body>

</html>

目前宽度适配效果良好，希望高度也能实现相同的自适应效果。

要让SVG同时适配容器宽高、避免撑高页面，需从容器约束和SVG属性两方面调整：

1. 给右侧容器添加溢出限制 #

.right容器原本没有溢出约束，SVG高度超出时会撑大容器，需添加：

.right {
    /* 保留原有样式 */
    overflow: hidden; /* 隐藏超出容器的内容 */
    position: relative; /* 为SVG绝对定位做铺垫 */
}

2. 调整SVG的缩放规则 #

将SVG的height="auto"改为height="100%"，并添加object-fit: contain属性，确保SVG按比例适配容器最大可用空间，且不会超出容器：

.scaling-svg {
    width: 100%;
    height: 100%;
    object-fit: contain; /* 保持SVG比例，完整显示在容器内 */
    position: absolute; /* 让SVG充满容器 */
    top: 0;
    left: 0;
}

如果不想用绝对定位，也可修改.right的flex布局：

.right {
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: flex-start; /* 取消垂直居中，避免高度被SVG撑开 */
    overflow: hidden;
}

.scaling-svg {
    width: 100%;
    max-height: 100%; /* 限制最大高度为容器高度 */
    object-fit: contain;
}

完整修改后的代码 #

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        * {
            box-sizing: border-box;
        }

        html,
        body {
            padding: 0;
            margin: 0;
            font-family: 'Courier New', Courier, monospace;
            font-weight: bold;
            font-size: 20px;
        }

        .full {
            background-color: cadetblue;
            height: 100vh;
            display: flex;
            flex-direction: column;
            border: 5px solid rgb(255, 0, 225);
        }

        .top {
            background-color: brown;
            color: white;
            height: 20vh;
            flex: 0 0 auto;
        }

        .bottom {
            display: flex;
            flex-grow: 1;
        }

        .left {
            background-color: rgb(70, 124, 168);
            width: 400px;
            border: 5px solid rgb(20, 255, 36);
            flex: 0 0 auto;
        }

        .right {
            background-color: rgb(255, 140, 0);
            color: white;
            border: 5px solid rgb(20, 224, 255);
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 100%;
            overflow: hidden;
            position: relative;
        }

        .scaling-svg {
            width: 100%;
            height: 100%;
            object-fit: contain;
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>

<body>
    <div class="full">FULL
        <div class="top">
            TOP
        </div>
        <div class="bottom">
            <div class="left">LEFT</div>
            <div class="right">
                <svg class="scaling-svg" viewBox="0 0 300 300">
                    <rect fill="#FF0000" height="296" id="svg_2" stroke="#000000" width="296" x="2" y="2" />
                </svg>
            </div>
        </div>
</body>

</html>

修改后，SVG会始终按比例适配.right容器的宽高，不会超出容器导致页面出现滚动条，同时保持原有布局稳定。

内容的提问来源于stack exchange，提问作者mike-al