Scrolling When Using Css Scale

I have a problem with css and I have to admit that I am just learning it. I have a header that stays at the top and a 'content' area that should be scrollable. Here are the two css

Solution 1:

This should do your effect:

JSFIDDLE

You simply have to wrap your content in another container, and you place this container in your main area. Then you scale not your main area, but just your content.

body,
html {
  height: 100%;
}

#main {
  width: 100%;
  height: 100%;
  background-color: black;
  overflow: auto;
}

.content {
  width: 500px;
  height: 400px;
  margin: 0 auto;
  background-color: white;
  transition: all 1s ease;
  -webkit-transition: all 1s ease;
}

.content:hover {
  width: 120%;
}

<div id="main">
    <div class="content"></div>
</div>

Added a hover state just for demonstration.