title: Angular 5 application CSS fix position of one div, while second one is scrollable
body: <p>I am having an issue with CSS on my angular application. 
  Here a picture of my structure for now : 
  <a href="https://i.stack.imgur.com/4hMpQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4hMpQ.png" alt="enter image description here"></a></p>
  
  <p>I am trying to disable scrolling in <code>Div1</code> and have <code>Div2</code> still scrollable.</p>
  
  <p>Here's my css for now : </p>
  
  <pre><code>.div0 {
    overflow: hidden;
  }
  .div1 {
    overflow: hidden;
  }
  .div2 {
    overflow: auto;
  }
  </code></pre>
  
  <p>But it seems to do nothing, I still have the full scrolling on the app. I tried to put <code>overflow: hidden;</code> in body (index.html), but then it disables the scroll completly. Any ideas?</p>
  
  <p>Sorry if I did a noob mistake, I'm a complete beginner in CSS. </p>