SCSS: Correct use "em" with "rem" without "px"

rem.scss

:root {
    font-size: 16px;
}

// Or you can use html
// html {
//    font-size: 16px;
// }

body {
    font-size: 1rem;
}

button {
    font-size: 0.875rem;
    // All the internal/external value use in 'em'
    // This value use of your "font-size" as the basic font size
    // And you will not have any problem with the font size of the container ( Example bottom )
    padding: .5em 1em;
    border: .125em solid #e3e3e3;
    @media (min-width: 48rem){ // min-width: 768px
      font-size: 1.125rem;
    }
    @media (min-width: 62rem){ // min-width: 992px
      font-size: 1.375rem;
    }
}

// Example:
.container {
    // font-size: 14px;
    font-size: .875rem;
    width: 80rem;
    button {
        font-size: .875rem; // Still use font-size: 14px
        padding: .5em 1em;
        border: .125em solid #e3e3e3;
        @media (min-width: 48rem){ // min-width: 768px
          font-size: 1.125rem;
        }
        @media (min-width: 62rem){ // min-width: 992px
          font-size: 1.375rem;
        }
    }
}