How to have a fixed modal header with materializecss

Materialize CSS - Modal Fixed Header

Modal Markup:
<div class="modal modal-fixed-header">
  <div class="modal-header">
    HEADER CONTENT
  </div>
  <div class="modal-content">
    MAIN CONTENT
  </div>
</div>

LESS Styling:
.modal {
    background-color: #fff;
    &.modal-fixed-header {
        padding: 0;
        height: 70%;
        .modal-header {
            border-top: 1px solid rgba(0, 0, 0, 0.1);
            position: absolute;
            top: 0;
        }
        .modal-header {
            border-radius: 0 0 2px 2px;
            //background-color: #fafafa;
            padding: 4px 6px;
            height: 56px;
            width: 100%;
        }
        .modal-content {
            position: absolute;
            top:56px;
            height: calc(100% - 56px);
            max-height: 100%;
            width: 100%;
            overflow-y: auto;
        }
    }
}