How to make a scaled element to correctly create overflow in its container?-CodePudding

I have a container div set to width: 1000px and height: 500px. Inside it there is an innner div set to width: 200% and height: 100% which makes container overflow horizontally.

The thing is, when I scale inner to double in the X axis, container suddenly doesn't show the first part of inner and I can't scroll enough to see it.

I gave inner a background separated by colors to make it more understandable, when scaled, the blue section (which is the first one) isn't viewable anymore.

How can I make container to scroll enough to see the entire blue part? Here is the HTML and CSS

.container {
  width: 1000px;
  height: 500px;
  overflow: auto;
}

.inner {
  width: 200%;
  height: 100%;
  background-image: linear-gradient(90deg, lightblue 0% 25%, yellow 25% 50%, lime 50% 75%, orange 75% 100%);
  transform: scaleX(2)
}

<div >
  <div ></div>
</div>

CodePudding user response：

This is happening because the default transform origin is at center. Change it to left so that the transform starts from left.

Try this.

transform-origin: left;

.container {
  width: 1000px;
  height: 500px;

  overflow: auto;
}

.inner {
  width: 200%;
  height: 100%;

  background-image: linear-gradient(
    90deg,
    lightblue 0% 25%,
    yellow 25% 50%,
    lime 50% 75%,
    orange 75% 100%
  );

  transform: scaleX(2);
  transform-origin: left;
}

<div >
  <div ></div>
</div>

CodePudding user response：

Here you can try this logic :

.container {
      width: 1000px;
      height: 500px;
      overflow: auto;
    }

    .inner {
      width: 200%;
      height: 100%;
      background-image: linear-gradient(
        90deg,
        lightblue 0% 25%,
        yellow 25% 50%,
        lime 50% 75%,
        orange 75% 100%
      );

      transform: translateX(50%) scaleX(2);
    }

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div >
      <div ></div>
    </div>
  </body>
</html>