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

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') = '200%'
zoomOutElem.addEventListener('click', function () {
    console.log('zoomOut') = '100%'
#main {
    width: 640px;
    height: 360px;
    border: solid;

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

button {
    margin: 1rem;
<!doctype html>
<html lang="en">

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


        <button id="zoomIn">ZoomIn</button>
        <button id="zoomOut">ZoomOut</button>
    <div id="main">
        <div id="content">




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

>Solution :

Try To Set overflow: scroll; on outer div

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

Leave a Reply