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

I know we can prevent overflow of child content using CSS overflow property.

But the overflow: scroll property is not preventing overflow.

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>

How can I prevent overflow on changing CSS zoom property by clicking ZoomIn button?

CodePudding user response：

Try To Set overflow: scroll; on outer div

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

CodePudding user response：

You can either define the width and height of #content, or set the overflow of #main to 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>