child expands container

by ShaCP

HTML

<div class="padding">
 </div>
 <div id="container">
  <div id="one">
  <span>Hello</span>
  </div>
  </div>
   <div class="padding">
 </div>

CSS

#one {
  width: 100px;
  height: 100px;
  background-color: lightskyblue;
  position: relative;
  animation: 3s linear forwards;
  /* margin-top: 100px; */
  writing-mode: vertical-lr;
  text-orientation: upright;
  letter-spacing: -1px;
  user-select: none;
  /* transform-origin: center; */
}

body {
  margin: 0;
  width: 100vw;
  height: 100vh;
}

#container {
  border: 1px solid;
  width: max-content;
  position: relative;
/*   top: 25%;
  left: 50%; */
}

.padding {
  border: 1px solid black;
  width: 100%;
  height: 200px;
}

JavaScript

const originalCoordinates = getCoords(one);
const containerWidth = getComputedStyle(container).width;
const containerHeight = getComputedStyle(container).height;
let currentCoordinates = originalCoordinates;


//Where inside the element did the click happen?
let innerOffset = {
  x: 0,
  y: 0
};

const moveElement = evt => {
  const {
    pageX,
    pageY
  } = evt;

  const XCoordinate = pageX - originalCoordinates.left - innerOffset.x;
  const YCoordinate = pageY - originalCoordinates.top - innerOffset.y;
  const anim = one.animate({
    /*     width: `${Math.abs(XCoordinate)}px`,
        height: `${Math.abs(YCoordinate)}px`, */
    transform: `translate(${XCoordinate > 0 ? XCoordinate : 0}px, ${YCoordinate > 0 ? YCoordinate : 0}px`,
  }, {
    duration: 0,
    fill: 'forwards',
    easing: "linear"
  });

  anim.commitStyles();

  const anim2 = container.animate({
    /*     width: `${Math.abs(XCoordinate)}px`,
        height: `${Math.abs(YCoordinate)}px`, */
    width: `${parseInt(containerWidth) + Math.abs(XCoordinate)}px`,
    height: `${parseInt(containerHeight) + Math.abs(YCoordinate)}px`,
    transform: `translate(${XCoordinate < 0 ? XCoordinate : 0}px`,
    backgroundColor: "red"
  }, {
    duration: 0,
    fill: 'forwards',
    easing: "linear"
  });
  
  anim2.commitStyles();

  currentCoordinates = {
    top: originalCoordinates.top + YCoordinate,
    right: originalCoordinates.right + XCoordinate,
    bottom: originalCoordinates.bottom + YCoordinate,
    left: originalCoordinates.left + XCoordinate
  }
}

const moveElementSetup = evt => {
  const {
    pageX,
    pageY
  } = evt;
  innerOffset.x = pageX - currentCoordinates.left;
  innerOffset.y = pageY - currentCoordinates.top;
  document.body.addEventListener('mousemove', moveElement);
}

const removeMoveEventHandler = evt => {
  document.body.removeEventListener('mousemove', moveElement);
}

document.addEventListener('mouseup', removeMoveEventHandler);
one.addEventListener('mousedown',...