Home How to make an scaled element to correctly create overflow in its container?

Questions

How to make an scaled element to correctly create overflow in its container?

November 30, 2022

Newbie here :3

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 to overflow horizontally.

The thing is, when I scale inner to double in 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

<div class="container">
  <div class="inner"></div>
</div>

<style>
  .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)
  }
</style>

>Solution :

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 class="container">
      <div class="inner"></div>
    </div>
  </body>
</html>