如何防止子 div 在更改 CSS 缩放属性时溢出父 div？

Question

我知道我们可以使用 CSS overflow 属性.

来防止儿童内容溢出

但是 overflow: scroll 属性不能防止溢出。

let zoomInElem = document.getElementById('zoomIn')
let zoomOutElem = document.getElementById('zoomOut')
let contentElement = document.getElementById('content')
zoomInElem.addEventListener('click', function () {
    console.log('zoomIn')
    contentElement.style.zoom = '200%'
})
zoomOutElem.addEventListener('click', function () {
    console.log('zoomOut')
    contentElement.style.zoom = '100%'
})

#main {
    width: 640px;
    height: 360px;
    border: solid;
}

#content {
    border: .1rem solid red;
    overflow: scroll;
}

button {
    margin: 1rem;
}

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

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <style>

    </style>
</head>

<body>
    <div>
        <button id="zoomIn">ZoomIn</button>
        <button id="zoomOut">ZoomOut</button>
    </div>
    <div id="main">
        <div id="content">
            <h1>Hi</h1>
            <h2>Hi</h2>
            <h3>Hi</h3>
            <h4>Hi</h4>
        </div>
    </div>

    <script>

    </script>
</body>

</html>

如何防止通过单击 ZoomIn 按钮更改 CSS zoom 属性时溢出？

Answer 1

您可以定义#content的width和height，或者将#main的overflow设置为scroll。

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

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <style>
        #main {
            width: 640px;
            height: 360px;
            border: solid;
            overflow: scroll; 
        }

        #content {
            /*width: 100%; 
            height: 100%; */
            border: .1rem solid red;
            /* overflow: scroll; */
        }

        button {
            margin: 1rem;
        }
    </style>
</head>

<body>
    <div>
        <button id="zoomIn">ZoomIn</button>
        <button id="zoomOut">ZoomOut</button>
    </div>
    <div id="main">
        <div id="content">
            <h1>Hi</h1>
            <h2>Hi</h2>
            <h3>Hi</h3>
            <h4>Hi</h4>
        </div>
    </div>

    <script>
        let zoomInElem = document.getElementById('zoomIn')
        let zoomOutElem = document.getElementById('zoomOut')
        let contentElement = document.getElementById('content')
        zoomInElem.addEventListener('click', function () {
            contentElement.style.zoom = '200%'
        })
        zoomOutElem.addEventListener('click', function () {
            contentElement.style.zoom = '100%'
        })
    </script>
</body>

</html>

Answer 2

尝试设置溢出：滚动；在外部 div

#main {  position: relative;overflow: scroll;}

如何防止子 div 在更改 CSS 缩放属性时溢出父 div？

How to prevent child div overflow out of parent div on changing CSS zoom property?

html

javascript

css

zooming

如何防止子 div 在更改 CSS 缩放 属性 时溢出父 div？

How to prevent child div overflow out of parent div on changing CSS zoom property?

html

javascript

css

zooming

如何防止子 div 在更改 CSS 缩放属性时溢出父 div？