Enable Scrolling in Angular 7

Question

Angular 7 : for some unknown reason scrolling is disabled. I do not know if this is related to using router-outlet, or something I have done in the css.

I am putting the code for 1 of my components in here. Every component is using the same css for the container div.

The problem is anytime a component is placed in the router-outlet and it is longer than can fit on the screen, there is no scrollbar and the user can't scroll down to see the content that is offscreen.

app.component.html:

<app-navigation></app-navigation>
<router-outlet></router-outlet>

view-ratings.component.html:

<div class="container" >
    /* a whole bunch of content */
</div>

view-ratings.component.css:

.container {
    position: fixed;
    top: 7em;
    width:90%;
    max-width: 90%;
    margin-right: 5%;
    margin-left: 5%;
    display: flex;
    flex-wrap: wrap;
}

Answer 1

Your container is fixed and probably ends out bottom of your page. The container of .container can't create the scroll bar of a fixed box. You have many possibilities, one is to set the end of your box bottom: 5px in my example.

.container {
  position: fixed;
  top: 7em;
  width: 90%;
  max-width: 90%;
  margin-right: 5%;
  margin-left: 5%;
  display: flex;
  flex-wrap: wrap;
  /* solution */
  bottom: 5px;
  overflow: auto;
  
  /* style */
  box-sizing: border-box;
  background-color: red;
  padding: 15px;
  
}

<div class="container">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus porta pellentesque massa non blandit. Nulla a ullamcorper quam. Suspendisse tincidunt nec erat quis viverra. Nam consequat massa magna, quis venenatis sem iaculis vel. Nulla ullamcorper
  dictum sapien nec cursus. Quisque interdum pulvinar magna, in tincidunt eros ultricies sit amet. Aliquam vel condimentum leo. Aenean tellus enim, posuere sed erat sit amet, pulvinar ultrices magna. Sed vitae iaculis nulla. Donec scelerisque eleifend
  magna ullamcorper sagittis. Aliquam venenatis mi lectus, sed suscipit velit ornare sit amet. Maecenas et tellus tellus. Praesent efficitur nibh a ipsum ultrices faucibus. Pellentesque erat dolor, consectetur eget congue et, aliquam suscipit justo. In
  hac habitasse platea dictumst. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse dictum maximus odio luctus fermentum. Vivamus ipsum erat, rutrum id felis eu, commodo fringilla neque. Donec in lacus
  magna. Phasellus tortor velit, aliquet id interdum et, facilisis ut erat. Maecenas venenatis lacus dui, ut vestibulum elit ornare id. Suspendisse potenti. Cras egestas libero nisl, sed blandit metus auctor vitae. Morbi vulputate nunc leo, sed lacinia
  arcu tempus in. Praesent a leo tortor. Morbi pharetra finibus mi, vel hendrerit justo lobortis at. Quisque tempus sem non neque placerat, a tincidunt neque lacinia. Pellentesque laoreet ex orci, id varius ante ornare eget. Curabitur volutpat quam gravida
  diam mattis laoreet. Praesent et mauris rutrum, scelerisque metus ut, convallis mi. Suspendisse eget lacinia lacus. Ut faucibus, ante id convallis elementum, neque lorem malesuada felis, ac imperdiet felis nisl ac urna. Aenean sagittis in arcu ac imperdiet.
  Fusce vitae convallis dui. Fusce condimentum tortor eget commodo volutpat. Morbi enim neque, dictum sed venenatis quis, dictum vel libero. Nulla ullamcorper eros ut sapien gravida ullamcorper. Mauris sit amet dolor a tellus sagittis maximus. Vivamus
  vehicula maximus magna, eget viverra tortor porta nec. Quisque gravida risus eget laoreet cursus. Nam vestibulum ullamcorper purus eget scelerisque. Integer lacinia faucibus ipsum, mattis convallis ex lacinia nec. Nunc commodo et ante vitae iaculis.
  Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam semper cursus rutrum. Duis sit amet fermentum mauris. Vestibulum ultricies vehicula ipsum at rutrum. Curabitur at felis lacus. Quisque porta enim vitae arcu commodo vulputate. Aliquam
  condimentum et ex ac cursus. Proin facilisis lorem ac augue cursus, congue posuere velit consectetur.
</div>

Another solution can be to set your box position: absolute; or not fixed then is your body to create the scroll bar.

.container {
  
  top: 7em;
  width: 90%;
  max-width: 90%;
  margin-right: 5%;
  margin-left: 5%;
  display: flex;
  flex-wrap: wrap;
  /* solution */
  /* position:fixed; */
  position: absolute;
  overflow: auto;
  
  /* style */
  box-sizing: border-box;
  background-color: red;
  padding: 15px;
  margin-bottom:50px;
  
}

<div class="container">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus porta pellentesque massa non blandit. Nulla a ullamcorper quam. Suspendisse tincidunt nec erat quis viverra. Nam consequat massa magna, quis venenatis sem iaculis vel. Nulla ullamcorper
      dictum sapien nec cursus. Quisque interdum pulvinar magna, in tincidunt eros ultricies sit amet. Aliquam vel condimentum leo. Aenean tellus enim, posuere sed erat sit amet, pulvinar ultrices magna. Sed vitae iaculis nulla. Donec scelerisque eleifend
      magna ullamcorper sagittis. Aliquam venenatis mi lectus, sed suscipit velit ornare sit amet. Maecenas et tellus tellus. Praesent efficitur nibh a ipsum ultrices faucibus. Pellentesque erat dolor, consectetur eget congue et, aliquam suscipit justo. In
      hac habitasse platea dictumst. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse dictum maximus odio luctus fermentum. Vivamus ipsum erat, rutrum id felis eu, commodo fringilla neque. Donec in lacus
      magna. Phasellus tortor velit, aliquet id interdum et, facilisis ut erat. Maecenas venenatis lacus dui, ut vestibulum elit ornare id. Suspendisse potenti. Cras egestas libero nisl, sed blandit metus auctor vitae. Morbi vulputate nunc leo, sed lacinia
      arcu tempus in. Praesent a leo tortor. Morbi pharetra finibus mi, vel hendrerit justo lobortis at. Quisque tempus sem non neque placerat, a tincidunt neque lacinia. Pellentesque laoreet ex orci, id varius ante ornare eget. Curabitur volutpat quam gravida
      diam mattis laoreet. Praesent et mauris rutrum, scelerisque metus ut, convallis mi. Suspendisse eget lacinia lacus. Ut faucibus, ante id convallis elementum, neque lorem malesuada felis, ac imperdiet felis nisl ac urna. Aenean sagittis in arcu ac imperdiet.
      Fusce vitae convallis dui. Fusce condimentum tortor eget commodo volutpat. Morbi enim neque, dictum sed venenatis quis, dictum vel libero. Nulla ullamcorper eros ut sapien gravida ullamcorper. Mauris sit amet dolor a tellus sagittis maximus. Vivamus
      vehicula maximus magna, eget viverra tortor porta nec. Quisque gravida risus eget laoreet cursus. Nam vestibulum ullamcorper purus eget scelerisque. Integer lacinia faucibus ipsum, mattis convallis ex lacinia nec. Nunc commodo et ante vitae iaculis.
      Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam semper cursus rutrum. Duis sit amet fermentum mauris. Vestibulum ultricies vehicula ipsum at rutrum. Curabitur at felis lacus. Quisque porta enim vitae arcu commodo vulputate. Aliquam
      condimentum et ex ac cursus. Proin facilisis lorem ac augue cursus, congue posuere velit consectetur.
    </div>

It depends on the result you are looking for.

Hope this help you :)