Bootstrap 4 Sticky-top Not Working Properly

I need to make the sidebar stick to the top. This works when the screen is smaller than the sm breakpoint, but larger than that, it doesn't stick. I thought the culprit could be the order of the class names, so I tried moving them but same results.

sticky-top works with col-sm-* but not with col-*. Why?

My code is in HAML and SCSS, I hope that's okay. Refer to this pen

.container
  %ul.nav
    %li.nav-item
      %a.nav-link{:href => "#"}
        Menu
    %li.nav-item
      %a.nav-link{:href => "#"}
        Active
    %li.nav-item
      %a.nav-link{:href => "#"}
        Link
  .row
    .col-sm-3.sticky-top#sidebar
      This sidebar should stick to the top, both in expanded view and stacked view.
    .col-sm-9#main
      This main will continue scrolling until the bottom while the sidebar will stick to the top.
      This main will continue scrolling until the bottom while the sidebar will stick to the top.
      This main will continue scrolling until the bottom while the sidebar will stick to the top.
      This main will continue scrolling until the bottom while the sidebar will stick to the top.

CSS

html, body {
  margin: 0;
  height: 100%;
}

.container {
  height: 120%;
  box-shadow: 2px 2px 10px;

  .row {    
    > #sidebar {
      background:#ccc;
    }
    > #main {
      background: #eee;
    }
  }
}

The #sidebar is as tall as the content, so there is no space for the sidebar to fix... so add .align-self-start to your #sidebar

https://codepen.io/anon/pen/PQbLPR

See also: https://getbootstrap.com/docs/4.3/utilities/flex/