Sticky footer doesn't work on angular application using a flex layout technique

Question

I can't make the footer stick to the end of the page when the main "content" is not enough to put it at the bottom.

My dom is like this.

My CSS is like this.

  body {
  min-height: 100%;
  display:flex;
  flex-direction: column;
}

html {
  height:100%;
}

main {

  flex: 1 0 auto;
    
}

footer {
  background-color:red;
}


  


  .error {

    border: 1px solid red;

  }

  a {
      color:blue;
      text-decoration: none;
  }