Cannot scroll to element if position absolute and overflow-x hidden specified

Question

I have animated ng-view. I'm using slideup animation, which requires absolute position of elements and also overflow-x: hidden to clip the content. In one sub-page I have to use scrollTo element functionality, but it doesn't work if both 2 values are specified. Here is a main ng-view class which is required for correct animations

.wrapper {
    position: absolute !important; 
    left: 0;
    top: 0;
    height: 100%;
    min-height: 100%;
    min-width: 100%;
    overflow-x: hidden;
  }

And structure:

<div class="wrapper ng-view-div">
 <nav>
        <ul>
          <li><a href du-smooth-scroll="section-1" du-scrollspy>Section 1</a></li>
            <li><a href du-smooth-scroll="section-2" du-scrollspy>Section 2</a></li>
            <li><a href du-smooth-scroll="section-3" du-scrollspy>Section 3</a></li>
        </ul>
    </nav>

<section id="section-1" style="background-color: red">
  C
</section>
<section id="section-2"  style="background-color: blue">
  C
</section>
<section id="section-3"  style="background-color: green">
  C
</section>
</div>

I prepared plnkr to easily show how it looks like for now. Is there any other way to achieve scroll working but with this two values ?

Answer 1

Here, height:100% in the wrapper CSS class creates an issue. Please use the wrapper CSS class below.

.wrapper {
    position: absolute !important; 
    left: 0;
    top: 0;
    min-height: 100%;
    min-width: 100%;
    overflow-x: hidden;
}