How to scale so that container also grows and takes up space

Question

So I have a container that I want to scale up and down (zoom in and out) but to also have its expanded/shrunk form to take up space rather than just overlapping other stuff.

Update

There is an image with which there are absolute divs that are placed in coordinates, they must retain their relative positions when sizing up and down (hence why I'm using scale).

var b = document.getElementById("outer");  var scale = 1;    function increase() {    scale += 0.1    b.style.transform = `scale(${scale})`;  }    function decrease() {    scale -= 0.1    b.style.transform = `scale(${scale})`;  }

#outer {    overflow-x: auto position: relative;    transform-origin: left top;  }    .pointer {    width: 20px;    height: 20px;    background-color: orange;    position: absolute;  }    #a1 {    top: 50px;    left: 150px;  }    #a2 {    top: 150px;    left: 50px;  }    #a3 {    top: 250px;    left: 550px;  }

<div>    <button onclick="increase()">Increase</button>    <button onclick="decrease()">Decrease</button>  </div>  <div id=outer>    <img src="http://via.placeholder.com/600x350" />    <div id="a1" class='pointer'>    </div>    <div id="a2" class='pointer'>    </div>    <div id="a3" class='pointer'>    </div>  </div>  <div>    please don't cover me  </div>

Would rather not have third party libraries (beside jQuery) but may consider.

Answer 1

CSS3 scale transitions work like that. Unfortunately, scaling would overlap other elements as it takes the contents of the container out of the flow by creating a new stacking context (essentially putting all its contents positioned relative to the container) - see the relevant doc description:

If the property has a value different than none, a stacking context will be created.

Source: MDN

See a demo below scaling all the elements by brute force:

var b, scale = 1, offset, pointers;    window.onload = function() {    b = document.getElementById("outer");    offset = b.getBoundingClientRect();    pointers = Array.prototype.map.call(b.querySelectorAll('.pointer'), function(e) {      return {        el: e,        offset: e.getBoundingClientRect()      }    });  }    function increase() {    scale += 0.1;    scaleIt();  }    function decrease() {    scale -= 0.1;    scaleIt();  }    function scaleIt() {    b.style.width = scale * offset.width + 'px';    b.style.height = scale * offset.height + 'px';    Array.prototype.forEach.call(pointers, function(e) {      e.el.style.width = scale * e.offset.width + 'px';      e.el.style.height = scale * e.offset.height + 'px';      e.el.style.top = scale * e.offset.top + 'px';      e.el.style.left = scale * e.offset.left + 'px';    });  }

#outer {    /*overflow-x: auto;*/    position: relative;    transform-origin: left top;  }  .pointer {    width: 20px;    height: 20px;    background-color: orange;    position: absolute;  }  #outer > img {    height: 100%;  }    #a1 {    top: 50px;    left: 150px;  }  #a2 {    top: 150px;    left: 50px;  }  #a3 {    top: 250px;    left: 550px;  }

<div>      <button onclick="increase()">Increase</button>      <button onclick="decrease()">Decrease</button>  </div>  <div id=outer>    <img src="http://via.placeholder.com/600x350" />    <div id="a1" class='pointer'>    </div>    <div id="a2" class='pointer'>    </div>    <div id="a3" class='pointer'>    </div>  </div>  <div>      please don't cover me  </div>

Answer 2

I tried it with the width and height, i think that will works the same way as you want, add a small animation and you can use it.

var b = document.getElementById("outer");  var b_width = document.getElementById("outer").offsetWidth;  var b_height = document.getElementById("outer").offsetHeight;    function increase()  {      b_width += 10      b_height += 10      b.style.width = b_width+"px";      b.style.height = b_height+"px";  }    function decrease()  {      b_width -= 10      b_height -= 10      b.style.width = b_width+"px";      b.style.height = b_height+"px";  }

#outer {    background-color: red;    padding: 1em;    height: 80px;    width: 80px;    transform-origin: left top;  }    #inner {    background-color: yellow;    height: 50px;    width: 100%;  }

<div>      <button onclick="increase()">Increase</button>      <button onclick="decrease()">Decrease</button>  </div>  <div id=outer>    <div id=inner>    </div>  </div>  <div>      please don't cover me  </div>